script.aculo.us Slider Demos and Example Code
I’ve been following along the script.aculo.us Slider Demo discussion area recently and have tried to answer questions when possible. Since it’s difficult to post examples to the discussion I’ve compiled a more extensive set of Slider demos. Some are examples that I’ve wanted and others are in response to questions in the discussion area.
The demo code includes the following slider examples:
- Standard Slider
- Reversed Slider
- Slider Controlled with Mouse Wheel
- One Slider Controlling Multiple Sliders
- Using Images to Spruce Up a Slider
- Two Colored Slider
- Submit the Slider Value in a Form
- Use a Slider as a Scrollbar (added Nov 21, 2006)
- Change Slider Value by Changing Text Input Field (added Jul 16, 2007)
It’s really amazing what you can do with the script.aculo.us library. Please let me know what you think!
103 Comments
Curious how you attach these slider controls to objects? For instance a div you wish to make scrollable?
A slider is comprised of at least 2 divs. One is the handle which you can grab and slide. The other is the track which the handle slides along. You can control all of the div styles through css. So you can make the slider 500 pixels wide, with a green border, and white background if you want. That might be one way to get the effect you’re looking for.
I’m not exactly sure what you mean by scrollable but the best way to make an html element scrollable is to use the css property “overflow: scroll;” or “overflow: auto;” and set the width and height of the element.
Thanks. I am looking for something reliable to use to replace what I currently employ – a slider component put out by blueshoes. It works on a lot of browsers but requires a doctype that throws nearly all of them into quirks mode! Fun. I understand the CSS behind it, just wasn’t sure how you attach the slider object as the controller of the scrollable property on the scrolling div. This is an example of how I would use it: http://www.proyectoitzaesusa.org/partners.html
Tim, I was intrigued by your request so I put together an example of how to use sliders as scrollbars and added it to the demos. Hope it works for you.
http://www.aldenta.com/examples/script.aculo.us/slider-scrollbar.html
Hi,
Is it possible to create a script.aculo.us Slider with two handles that works within a range, but uses exponentially increasing incremental values within the slider.
For Example the slider has a range of 0 – 91,000, would it be possible to have the slider values go from say 0 1,000 in smaller increments and then increase on a larger scale for the larger values.
I hope this question makes sense.
I tried posting this on the discussion board of script.aculo.us but the server seems to be down at the moment.
Any guidance you can give would be greatly appreciated… I am still a bit of a newbie at this
Thanks
hi,
Is it possible to create a script.aculo.us Slider with two handles that works within a range, but the two handles never meet each other.
For Example the silder has range 1-10, would it possible that if my first handle is at 4 then the other can be moved to 5. both handles can not be at same postions any time. there should be minimum difference of one.
Thanks
paddy, sorry for the delayed response. I’ve been out of town for the past week.
You probably don’t want to set that large of a range of slider values. You can take the value of the slider and calculate anything you want in the onSlide and onChange functions.
Using the standard slider setup with no range specified it will use 0-1. Then, this will probably do what you’re looking for:
onSlide: function(v) { $('debug1').innerHTML = 'slide: ' + Math.round(Math.pow(91001,v)-1); }, onChange: function(v) { $('debug1').innerHTML = 'changed: ' + Math.round(Math.pow(91001,v)-1); }By using a bit of math you get the exponential output you’re looking for.
Deepesh, I don’t have a 2 handled slider demo up yet but it’s something that I’ll probably add in the future. I’ll keep your idea in mind for the demo.
Hi John,
Thanks That’s been a great help.
Cheers
Paddy
Nice demos, they will most certainly come in handy.
I’ve got a question though; I’m not much of a JS head, so forgive me if I’m missing something quite simple. I’d like to read the position of the slider from an outside function. How would I go about doing that?
Michael,
When you create the slider make sure you assign a variable to it.
Then you can ask for the value of the slider.
Glad to hear you like the demos!
Great; that worked perfectly :)
Another question; how have you made your sliders react to being clicked on? I’ve tried parsing your code to see what you’re doing differently from me, but I’m not seeing it.
Michael, it’s part of the normal Slider functionality. There are 2 callbacks that respond to the slider – onSlide and onChange. onSlide responds when the slider is held and moved around. onChange responds when you either click the track or when you release the slider after moving it. But, the actual movement itself from clicking the track is already built in. You do have to make sure that your HTML code is setup correctly or it’s possible that the track div is not visible to a mouse click.
Aha. That’s the reason then. I essentially only needed it to perform an action onSlide, so I never set onChange.
Again, thanks a lot.
No, that doesn’t seem to do it either.
If you have the time, you can pay my site a visit and click the ‘
Alright, that borked.
I mean: Clock the ‘older’ link at the top, and then try out the slider to the right of the search bar.
The code that inits it is here.
Michael, my best guess is that the trimmertrackend div is on top of the trimmertrack div. Since it doesn’t look like you need to change the background image width you could probably take out the trimmertrackend div and set the background to the trimmertrack div.
Or, you could use the div code in the slider scrollbar example. You’ll notice that I used a ‘wrap’ div for the image example. It’s so that you can click anywhere on the track. The problem is that if you use other divs to style the slider they sometimes, although transparent, lay on top of the track and you can’t click the track.
Doesn’t look like it was the extra DIV.
So, the way your example works is by using the wrap as the ‘graphics’ of the slider or…?
thanks for the demos.
I wonder if you could add one to your examples on how to use multiple of the same type on a single page without declaring each. I’ve been trying to work it out this morning but my JS skills aren’t there so I’m moving to a different solution but I’d love to see it when you have the time/inclination.
I was trying to work it out by classing a sliderwrapper div and using getElementsByClassName + a for loop. close but…
thanks again for the tutorials. I got further today with the sliders than ever. :)
will
Hi. I’m looking for a dual range slider. Basically, i’m looking for 4 points and 2 “ranges” between the points on one slider bar. Does your code support this?
Thanks for any help.
I’m going off on a tangent here, but I love the images you used for your “Using Images to Spruce Up a Slider” and “Use a Slider as a Scrollbar” slider demos. Are you licensing those out? If so, what is the license on them? Alternately, do you have any tips on how I could go about creating similar slider handles and/or tracks? I am getting acquainted with GIMP, but I don’t have the mastery required to create snazzy tracks and handles like yours.
Sorry for the delay everyone – been really busy w/ the holiday.
Michael, did you ever get your version to work? I still think it might be something with the layout/nesting of the HTML/DIV code. At least, that’s where I ran into most of my quirks. I took the regular examples listed at the script.aculo.us wiki and then wrapped an extra div around it. That allowed me to add the images without messing up the mouse-click handling of the slider and handler and keep the style in the major web browsers.
will, I don’t think you can ask for Slider object by class name since they’re JavaScript objects and not HTML elements. If you can, I think the best thing is to create an array of the objects and loop through the array when you need to.
glenn, I haven’t posted a multiple-handle demo yet but I probably will in the future. I’m not sure if it’s possible to do what you want with the current Slider functionality but maybe you can put 2 sliders next to each other and simulate what you want. Take a look at the Slider functional tests for some more guidance.
Bernie, the images are taken directly from the Mac OS X operating system. The slider is part of the standard OS X development kit. Honestly, I’m not sure what the licensing terms are on the images or if I should even use them in my example. People build OS X applications and distribute them with the slider widget but I don’t know if that translates to using the images on the web. I turned them into 3 transparent PNGs. A left track (tiny left side of track), right track (a long portion of the track to create the background and right nub) and handle. All you have to do is create those 3 images and replace them in the HTML/CSS code.
John,
I am trying to use the slider as a scrollbar but I want up/down arrows at the top & bottom. http://www.planjam.com has a a crude example of this but click and hold does not work.
I have made two examples:
http://www.abgdevelopment.com/ourTeam.html &
http://www.abgdevelopment.com/ourTeam2.html
where #2 has the arrows
all is fine in IE, in firefox however….
the layout is screwy and the code i used for timers on the mousedown and mouseup events screw with the timers on the drop-down menus on the top nav.
Any ideas?
Steve, it looks like it’s coming along well now on your ourTeam2.html file. Make sure you post an example somewhere and let other people know how you did it. Great work!
Thanks for the demos they really helped me out, I appreciate the minimalist touch with your CSS also makes examples much easier to follow. Thanks again for posting your work here.
-d
dan, you’re welcome and I’m glad you like the examples.
Hi,
I’m using the slider as the scrollbar, have updated to the last version of slider.js & prototype but we have a problem with firefox concerning the embed objet. On the content div part (scrollbar div in your exemple) if you put some flash embed objet they are still visible with Firefox browser). The scrolling engine work well but the page show every embed.
I have try to post a bug issue on the main site of script.aculo but every time i arrive on a page :
Forbidden
TICKET_CREATE privileges are required to perform this operation
Sorry to disturb this comment section.
Regards,
Mr F.Guerin
Hey John, great demos. They work like a charm. I however am running into a problem in IE7 when I postback via AJAX into the div that has scroller. After my HTTPRequest finishes I call the “show scroller” type function again, so it appears disappears as needed, but I actually can’t get IE7 to recognize my overflow:hidden attribute. Has anyone run into this issue before? IE7 always displays all of the contents and doesn’t actually handle the overflow when you refill that DIV via Ajax. Any thought would be appreciated….
John-
I cannot say enough about how great this slider is. I have been able to completely customize it to fit my needs, with great help from your examples. The issue I am running into is that I want to put the slider in a div tag where visibility:hidden then onMouse Over for an image it is set to visible. As soon as I do this and load the page I get a ââ¬Ëthis.track.offsetWidthââ¬â¢ is null error. I found the patch code for Display:none and verified I have that in the slider.js file. When I move the slider outside of that hidden div tag it works. If you have any ideas they would be greatly appreciated. Thanks in advance for any help.
hey guys, I’m trying to build a timebased reservation system, and I want to incorporate the slider as part of the app. Is there a way to create a 2-handle, expandable slider? I would like to use this functionality to determine the to/from range of the timeline. If this is possible, John, can you try to include this in your list of awsome and helpful examples?
thanks
Hey John-
Could you PPLLEEAASSEE put a demo of how you can automatically update a MySQL db as you slide the handle (via AJAX, no submit button). Ideally I would like to have multiple sliders on one page and as each one is slid, the MySQL db is automatically changed accordingly. It would be VERY appreciated. Thanks!
Thank you very much. I have found you with google. You helped me good!
Greetings from Holland!
Update mysql db with slider:
This is pretty straight forward:
you have a text input field; you want to submit to your database. For this you place your text input field, named ‘text_input_field_name’ into a html form with a submit button etc.
as usual.
OnChange you want to take the slider value and set it as your text input value:
onChange: function(v) { $(‘debug2′).innerHTML = ‘Value: ‘ + v; $(‘text_input_field_name_here’).value = v;
(here shown with an additional debug field on the html page to see the value v.)
This sets value v into your text input field. When you push submit, it’s on the way to the db, provided your input button provokes somthing like ‘INSERT INTO db_table (text_input_field_name) VALUES ( … )’.
for some more variation:
onChange: function(v) { $(‘debug2′).innerHTML = ‘Value: ‘ + v; $(‘text_input_field_name_here’).value = v;
if (v
for some more variation:
onChange: function(v) { $(‘debug2′).innerHTML = ‘Value: ‘ + v; $(‘erail_rv_size’).value = v;
if (v=24 && v
sorry, next try:
onChange: function(v) { $(‘debug2′).innerHTML = ‘Value: ‘ + v; $(‘erail_rv_size’).value = v;
if (v=24 && v
I’ve been banging my head against this one for a bit now: is there a way to control a slider FROM a text input field? I.E.: I have a slider with a range of 1-100, with a text field beside it. I type 37 into the text field, and onkeyup the slider immediately jumps to the position of the number I’ve typed? Has anyone pulled that one off?
scotty, I’m going to need that for a future application so I thought it would be a good idea to create an example. Take a look: http://www.aldenta.com/examples/script.aculo.us/slider-text-field.html
Hi John,
Great demos! I have one question about the functionality of these sliders: is there any way to make them adjust as the size of the scrollable area changes? That is, I have a drill-down tree inside the scrollable div and would like the scroll bars to adjust as the text inside expands. As it is, expanded content is simply hidden. I’d like to emulate CSS’s overflow: auto attribute–is this do-able from within your framework?
Cheers!
Thanks Chelsea. I’m not completely sure what you’re trying to do. It sounds like you want the scrollbar to be hidden when there isn’t much content but show up when there is enough content to scroll? Is that correct?
Thanks for the quick reply, John (and sorry for the delay on my part). What you described is in fact what I’m trying to do. A little more messing around with things actually gave me the answer. It seems that the scrollbars did in fact adjust themselves to my AJAX’ed content…I just couldn’t tell because the sliders stayed hidden. It looks like I can just put an else statement after the scrollHeight check and then show the sliders again. Thanks again for the great demos!
These demos and code are excellent! A great help.
One question: how does one control the positioning of the slider? Specifically, I’d like to center the slider within a div. However if I do this the slider no longer works appropriately – the handle coordinates get messed up and no longer line up appropriately.
I’m sure there’s some styling way to fix this, but it’s not obvious to me. Anyone have any clues?
Glad the demos helped minson. Positioning the slider on the page is a CSS task. For example, below is what the code might look like in the Standard Slider example. You add a div around the track and then tell the track to center in the middle of the parent div. Any text that you have (i.e. – coordinates) will need to be positioned using CSS as well.
<div style="border: 1px solid blue; width: 600px; text-align: center;"> <div id="track1" style="margin: 0 auto; width:200px; background-color:#ccc; height:10px;"> <div id="handle1" style="width:10px; height:15px; background-color:#f00; cursor:move;"></div> </div> <p id="debug1"> </p> </div>Response to Scotty: using range and value; setting slider from text input field.
you have to define the range and the value of the slider in a way that you can input
a single digit.
Example: you want your slider at position ‘37′; first you will key in ‘3′, then ‘7′.
The ‘3′ has to be defined in your range and value; if not, the slider will jump to the min or max possible value. The slider will jump to ‘3′. Then you key in ‘7′, now your input field reads ‘37′ and the slider will jump to ‘37′.
hi!
thanks a lot for the demos, i was desperately roaming for a solution for spicing up scrolling divs! awesome!
greetings,
S
[...] http://www.aldenta.com/2006/11/12/scriptaculous-slider-demos-and-example-code/ [...]
Hi John. This request is not directly related to your demos. I had troubles in reinitialize slider object : I want to dynamically change Values and Range so I write 2 times this line into a function:
function setWiev(wiew){
if (wiew==”normal”){
mySlider = new Control.Slider(âhandleâ,âtrackâ,{values: array1, range:$R(0,total1?),
…
}else if (wiew!=”normal”){
mySlider = new Control.Slider(âhandleâ,âtrackâ,{values: array2, range:$R(0,total2?),
…
}
In Firefox 2.0 it works with wiew!=”normal” except when you click on the track point to go directly: it mantains the values of array1.
In IE 7 with wiew!=”normal” it doesn’t work because it keeps the values and range of the first call.
Paolo, I’ve not tried doing that before but I think it should work. It’s also hard to tell without seeing your code. Make sure you define your slider outside of the function somewhere so it’s global.
var mySlider; setWiev('normal');If that still gives you problems then you can always try disposing of the slider before you create a new one. That will force the slider to stop observing all of the mouse events.
Hope this helps.
Thanks for the demos John.
Can you spare any advice as how I might dynamically change the range of a second slider, based on the value of the first.
Hi,
Is it possible to display labels on sliders using script.aculo.us.Please give the solution.
Hi JOHN,
When I am using source code of the above demos.I am getting this error.Control is undefined.i am not good in javascript.Please help.I think the problem is in slider.js that i have loaded.
Andy, you might be able to try something like the following. The range values are used in a few places so I haven’t tested to see if this will work. If not, you may have to create a new slider each time.
Prasuna, you probably can display labels on a slider with CSS but it may be a bit tricky. You’ll most likely need to use absolute positioning. Otherwise, you could always put your CSS labels next to the slider. I don’t have an example created of this right now.
Haritha, make sure you have the script.aculo.us javascript files when you’re running the example code. You need prototype.js and slider.js for the examples to work.
Hello,
Great examples here! I’m just getting my feet wet with everything. And am trying to do a simple slide bar with values only whole integers. From the scriptaculous wiki it said to do set it up like: Adding *** for the line I’ve been trying to change
new Control.Slider(‘handle1′, ‘track1′, {
*** values: [(value*100).toFixed();],
//sliderValue: 1, // won’t work if set to 0 due to a bug(?) in script.aculo.us
//range: $R(1, 100),
//increment: ‘1′,
onSlide: function(v) { $(‘debug1′).innerHTML = ’slide: ‘ + v },
onChange: function(v) { $(‘debug1′).innerHTML = ‘changed: ‘ + v }
});
All of the items commented out I’ve tried various different combinations to see if I can get the slide bar to work, but nada. If I comment out the values or make it actual integers it works, but I don’t want to do it for 1-100. And the line I got was from the wiki, but said it might be out dated.
Thanks!
Dan, there is an example I posted that uses integers – http://www.aldenta.com/examples/script.aculo.us/slider-text-field.html
The trick is that you’re not setting the range of values from 0-100 but when onSlide or onChange get called your turning the small decimal values into whole numbers. So you keep the range of 0-1 and call (value*100).toFixed() to make it an integer.
Hope that helps.
John,
Thanks for that it worked perfectly. I’m still a javascript noob so if you don’t mind I have another question. It’s somewhat related to the slidebar.
How can I get the value after it’s changed to subtract from an overall pool? Say the pool is 125, and you set the slide bar to 75, I want the output to say 50 left for example. Without having to submit a form, or even in the beginning by submitting.
The closest I came was outputting the slider bar variable when I refreshed. And I see the onChange within the slider bar but not sure how to assign that to a different variable?
Thanks again!
Dan, you can manipulate any global JavaScript variables inside of the onChange function, assign new variables, call functions, etc. For example:
var pool = 125; var amountLeft = 0; ... onChange: function(v){ amountLeft = pool - (v*100).toFixed(); $('debug1').innerHTML = amountLeft + ' left'; }Hope this helps.
Hi John, thanks for your great work!
I think th question was already asked before, but I would really really appreciate a solution and perhaps some others, too.
When I add or remove content from the main div dynamically, the sliders won’t be updated. Doing the initialisation again would position the sliders back to the top/left independent from the last viewed position.
Very thanks for any ideas!
Hi Christian,
What exactly are you updating that’s changing the slider? If you want to update the value of the slider use the setValue function.
Is there a way to hide the handle on the slider until the user clicks on the slider. Then have the user determine the initial value of the handle based on where they click on the slider?
Thanks!!!
Kathie,
Yes, you can do something like that. Here is code taken from the Standard Slider Demo and modified slightly.
<div id="track1" style="width:200px; background-color:#ccc; height:10px;" onmousedown="$('handle1').show();"> <div id="handle1" style="width:10px; height:15px; background-color:#f00; cursor:move; display:none;"></div> </div>You have to hide the handle by setting its style to display:none; and then show it when the track is clicked. I’ve not tested this thoroughly so no guarantees where it will or won’t work.
Hope this helps.
Hi, i have tried your example:
http://www.aldenta.com/examples/script.aculo.us/slider-scrollbar.html
but it doesent seem to work in opera8.
any idea why?
Hi erich, I’ve not tested things in Opera 8. If you’d like to test and debug it in Opera 8 I’d be happy to add any fixes you find to the example code. Unfortunately, I don’t have time at the moment to test in Opera.
Hi there. great examples
this is a huge noob question, but do you know if the slider could be used to select the number of columns a table has? like if i had a 5 x 5 table of images, would it be possible to have a slider change the number of columns to 6 or 7, with the images dynamically moving to completely fill the table, which would cause the number of rows to decrease?
Hi Marcus. Yes, I believe that is possible using Prototype and the script.aculo.us Slider. You’d need to have knowledge of Prototype/JavaScript and how to manipulate the tables (and the DOM). It’s more of a consulting job and not something I can spend time on as a free comment response. Best of luck.
Hi John,
Those examples make light work of using the Slider effects in Scriptaculous. Do you know of any method by which the slider can be moved gracefully (smoothly) when you click somewhere on the track as opposed to dragging the handle?
Hi Tom, I’m glad you’ve found the examples helpful. Unfortunately, I don’t know of an easy way to make the scrollbar move smoothly. You’d have to override the actual Control.Slider class code in script.aculo.us.
Hi there,
like your samples, they have inspired me to build something like that for my Community :-)
Thanks for sharing the codes!
Greetings Milos
I’m not sure if this is what Minson was asking above but I wanted to center my slider handle in the middle of my slider bar to begin with and this is how I did it.
new Control.Slider(‘capacityHandle’, ‘capacityTrack’, {sliderValue: 0.50,…
This will start the slider physically and numerically in the center. Thanks for the great examples!!
Hi,
I was trying to get the slider working, within a tab based interface (http://www.barelyfitz.com/projects/tabber/) but it doesn’t work with the tabber.js file.
Has anybody worked an example or know what could be issue? Perhaps the nesting of the “scrollable” div is a problem, or may be the windown.onload event.
I’d appreciate any help or advice.
Cheers,
Husain
Hi,
Thanks for the great slider/scrolling div example, John!
It worked fine for me until I started displaying images as an unordered list within the scrolling div. Firefox and Safari both seem to have issues with determining the scrollHeight. Firefox won’t display a scrollbar when opening the page but when you hit refresh after that its suddenly there. Safari is even less consistent.
Setting a fixed height on the images seems to solve the problem. My images come in various sizes though, so that doesn’t really work.
I’d greatly appreciate it if anyone has any suggestions. You can observe my struggles here: http://showcase.pacelinegroup.com/work/europe
Thank you so much,
Ulf
Hi Ulf, try doing something like this to make sure the entire page loads before the slider gets created. I’m guessing that the slider builds itself before the images are loaded and it can’t figure out the correct height.
var slider; Event.observe(window, 'load', function() { slider = new Control.Slider('handle', 'track', { axis: 'vertical', onSlide: function(v) { scrollVertical(v, $('thumbnails'), slider); }, onChange: function(v) { scrollVertical(v, $('thumbnails'), slider); } }); if ($('thumbnails').scrollHeight < = $('thumbnails').offsetHeight) { slider.setDisabled(); $('wrap').hide(); } } ); function scrollVertical(value, element, slider) { element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight)); }Hi John,
Thanks so much! That works perfectly!
Feel like I should have figured that out on my own, though ;-)
Cheers,
Ulf
Thanks again for the great post. The slider is a tricky beast but your examples help to tame it. :)
Hi John,
These examples and this forum have been extremely helpful.
Thanks so much for these!
I’m trying to use a slider as a scroll bar with arrows and
mouse wheel function. Above is mentioned that someone has created one with arrows, but the link doesn’t work.
Any advise on making this work?
Thanks a bunch!
jason
If you want “clickable” arrows then one idea would be to use images/links to call slider.setValueBy(delta). I think that will give you the desired results. I believe you can pass the function a negative or positive number to shift it in either direction. I’ve not tested this so I’m not 100% sure it works.
Hey John,
Your slider is working perfectly in my site… I just wonder if there’s any way to make it Fluid so that it stretches with the page width?
I tried to just change the widths to 100% with no luck… any help would be much appreciated.
Thanks!
Blake
Hi Blake, I think it will work if you change the width of the track div to 100%. It worked in a simple test I did with Firefox and Safari. However, I noticed if you resize the window that it might mess up the slider. You’d need to have a hook into the window resize and update the slider when someone resizes the browser window.
Hi John, thank you for this great work.
I use the slider on a text div but i have a problem, in the webdesite have a menu with submenu item, all work good in FF but on IE6 and 7 when i put the javascript of the slider all my submenu are highlighting when im in submenu, if i remove only the js of the scroller in the head all is ok.
Have you an idée of the problem ? you can see my exemple here : http://www.webdesigner-freelance.eu/work/cordouan/
you will see on internet explorer there is highlight problem when navigate in submenu and if remove this js the problem disappear.
thank you very much.
Hi, and thank you for the sliders example.
All work fine but when i put images instead of text on one sliders of the “Use a Slider as a Scrollbar” example, the scrollbar disappear on Safari and only on Safari(3+).
Have you an idea why ?
Sincerely.
Vincent
Hi John
I’m using the example “Change Slider Value by Changing Text Input Field” is very helpful for me but only accepted integer values. is posible that this accepted decimal values too.
Many Thanks
Christophe, I hope you got things working. I would recommend using CSS for your navigation rather than JavaScript. I’d have to look in more detail to see why it’s not working on your site.
Vincent, do you have an example of this somewhere? I tried viewing the examples I made in Safari 3 and it seemed to work fine.
Jorge, you may have to play around a bit but here’s essentially what you’ll need to do. Remove all of the ‘.toFixed()’ calls so the values don’t become integers and then change the following in setSliderValue so that you can use a decimal.
Change
to
Thank you for your response but i found why it wasn’t working on Safari 3, it was my mistake, sorry.
But i have now another question : when i create it through ajax, the slider does not work anymore. I think that’s because i have to reset the slider after the ajax update. Do you know how ? something like Slider.reset(‘id’) maybe ?
Sincerely
Vincent
Hi Vincent, it depends what you’re doing with Ajax. If you’re replacing all of the track and handle html code then you might have to create a new slider. It looks like you’d have to do quite a few things to “reset” the slider. If you just need to reposition the handle then you can use slider.setValue(value).
Im wondering if there is any way to set format to the value slider (i mean display money format: ex. $2,350,400.00).
Ruben, yes you can format the result of the slider as a currency (or anyway that you want). You’ll want to search the web for currency formatting in JavaScript. Here’s one example that might work: http://snippets.dzone.com/posts/show/4646
Hi, I’m using aslide in a floating div to scroll through overflw content of that div and everything works fine so for. Now, i have a resize handle on the floating div so that the window is resizeable and therby also the slider track change height when the div change height. So… when finished resizing the div I dispose the Slider and creates a new one:
help_floaters.id_10.dispose();
help_floaters.id_10 = new Control.Slider(‘help_floater_slide_handle_10′, ‘help_floater_slide_track_10′, {
axis: ‘vertical’,
onSlide: function(v) { scrollVertical(v, $(‘help_floater_dynamic_content_body_10′), help_floaters.id_10); },
onChange: function(v) { scrollVertical(v, $(‘help_floater_dynamic_content_body_10′), help_floaters.id_10); }
});
And it works fine… well almost… when releasing the drag handle it snaps back to the top position. Any clues what might go wrong here?
Hello all,
thanks loads for all these tips and tricks and for your time. Tis all very helpful.
I need help positioning my handle and horizontal content. Richard’s answer from March (basically… sliderValue: 0.50, ) is great for positioning my handle wherever I need… but it is not moving the content of my scrollHorizontal area… so when I click on the positioned handle, my content jumps position, in order to be in it’s correct position…
Is there a variable I can input so as to basically position the handle as if it’s been moved – therefore also positioning the content correctly…
Fingers crossed, and thanks again for everything so far…
… I’ve found an answer for this…
Just adding onload=”slider2.setValueBy(0.856);” does what I need.
Cheers!
Hi John,
Came across your site looking for slider tips, this is a great resource!
Here’s something I’ve been struggling with (I’m a JavaScript newbie, it’s proving much more difficult than html and css). I’d like to create a twin handled slider w/range select, the twist being that the track has three different colors, e.g., (1) red between the left edge of the track and the left handle; (2) yellow between the two handles; and (3) green between the right handle and the right edge of the track.
Ideally, this slider would output three values in text input boxes: (1) the left handle value (red area); (2) the range value (yellow area); and (3) max value – the right handle value (green area).
Any help you can provide is much appreciated!
Cheers!
Hi John,
I implemented the slider with two handles on my web application and it works great on Firefox and IE7 but I have one issue on IE6. I also have a pure-css hover menu (using control adapters in .net) on the page and the menu flickers in IE6 on the page where slider is present. The menu works fine on other pages where the slider is not present.
Do you have any idea why it is doing so?
Can some one tell me where to find something like this, but use scriptaculos.
http://woork.bravehost.com/mootoolsScroller/index.html
Hi.
Thanks, John, for the great slider demos and devoted replies.
I wanted to add something that confused me for a bit; had to look into the library:
If you want to setValue on a specific handle, use the second parameter in setValue. The first parameter is the value you want the handle to set to, the second specifies the handle. Here’s the catch: you use the zero-based handle index: i.e. the third handle added is identified as “2″; not the handle elment’s id attribute, which is used elsewhere!
Thanks again.
Thanks for the help with hiding the button on the slider until you click!!!! It works!!!
John,
Great script. I copied the slider code into a blank web page, and it works great. (I am just using a vertical slider.) Then I copied and pasted a second slider into the same page. It appears, but I can’t grab the handle. I had the same problem pasting the original into another web page as well. I created a new var, and all new tags. I have tried everything, but can’t get the second slider to function.
Can you take a look, or offer a suggestion? Thanks.
HI
How can i use this slider as ajax in asp.net application ,
I want the partial postback to be happen once we are changing the value of slider , so that i can use that value in search method of my page .
HI Guys ,
I want to disable one handle of dual handle slider at fix position , I am able to disable the full slider but can’t one handle , please provide me the solution for this
Thanks
Mohit
Hi,
These sliders are awesome–I’m just wrapping up a project using this code (after trying to do what I needed with the jQuery UI sliders unsuccessfully).
I have one issue which I’d like to fix. When calling setEnabled on a slider, it triggers the onChange event…is there a way to suppress this behavior? I only want the onChange event at the end of a onSlide event (after the slider value has actually changed).
Thanks,
David
How can I download these files shown on the websitelink, esp. the one with the form option ?
Hi i m facing a prob i m using a dualslider in my application the prob is whenever postback is happening, my slidercontrol is reset to default position.. I don knw where d prob occurs… Please help me on this.
hi
great piece of code
where do i set the number increment, i want it to be only 2 digits behind the point
i would like to set an intital number and for example 120 and increment to 121.09 or 119.97
thanks
Dee
Great stuffs. Thank You.
However, these do not seems to work if a page contains a call to a “jquery-1.2.6.pack.js” script for other purposes. Any hint on how to fix this?
@Dee, you’re probably going to need to manipulate the values in onSlide/onChange and possibly the increment parameter (http://wiki.github.com/madrobby/scriptaculous/slider). I don’t know of a quick fix for this.
@Flodder, jQuery and Prototype don’t play well together by default. You’d probably need to look into jQuery.noConflict(): http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Hi john,
Incredible sliders!!! and they way they are presented is so simple and easy. I must say i am highly impressed. Also i was trying your example “Two Colored Slider Demo” and it worked like a charm in the case of single handle,but what should be done, to implement this horizontal changing color slider in case of 2 handles?
Any help would be highly appreciated.
Regards
Michael