I had a bit of frustration lately when dealing with jQuery UI’s slider widget, more specifically when trying to deal with many on the same page. I wanted to follow the same pattern shown in the example for snap to increments where I have a div for the slider, and the value is actually set to a text input for easy form submission. The individual elements look something like this:
HTML | |
1 2 3 4 5 | <div class="SliderControl"> <label for="clarity">Clarity:</label> <input type="text" class="SliderText" readonly="readonly" id="clarity" name="clarity"/> <div class="RatingSlider" id="claritySlider"></div> </div> |
<div class="SliderControl"> <label for="clarity">Clarity:</label> <input type="text" class="SliderText" readonly="readonly" id="clarity" name="clarity"/> <div class="RatingSlider" id="claritySlider"></div> </div>
Basically there’s an input, and a single slider per input. The slider’s name is {input name}Slider. I had some trouble reconciling this setup with the way that the example on the jQuery site is laid out:
Javascript | |
1 2 3 4 5 6 7 8 9 10 | $("#slider").slider({ value:100, min: 0, max: 500, step: 50, slide: function(event, ui) { $("#amount").val('$' + ui.value); } }); $("#amount").val('$' + $("#slider").slider("value")); |
$("#slider").slider({ value:100, min: 0, max: 500, step: 50, slide: function(event, ui) { $("#amount").val('$' + ui.value); } }); $("#amount").val('$' + $("#slider").slider("value"));
My problem was, I couldn’t find a way to derive the underlying element’s id from the “ui” parameter in the callback specified for “slide”. The way I ended up handling this was using the jquery’s .each function to configure the sliders one by one. Its’ not ideal, but its’ also not that much more code, and I doubt many pages I’ll be working on have so many sliders that it will become an issue.
Javascript | |
1 2 3 4 5 6 7 8 9 10 11 12 | $('.RatingSlider').each(function(idx, elm) { var name = elm.id.replace('Slider', ''); $('#' + elm.id).slider({ value: 3, min: 0, max: 5, step: .5, slide: function(event, ui) { $('#' + name).val(ui.value); } }); }); |
$('.RatingSlider').each(function(idx, elm) { var name = elm.id.replace('Slider', ''); $('#' + elm.id).slider({ value: 3, min: 0, max: 5, step: .5, slide: function(event, ui) { $('#' + name).val(ui.value); } }); });
I’d be very interested in finding a way to avoid the .each, but I couldn’t find anything on the interwebs and this seems to be working for now.
edit: I threw together a quick demo per requests in the comments. You can download it here: jQuery UI Multiple Slider Demo. Hope it helps!
13 Comments
Look at their colorpicker example for multiple sliders: http://jqueryui.com/demos/slider/colorpicker.html
Although I could be misunderstanding the question…
I saw that one, but my problem is a bit different. That example reads the value of all three sliders, and uses them to refresh a single area. I wanted a way to map each slider to a corresponding form input based on the element name (which I couldn’t find out how to determine from the ui object passed to the callback). Probably should’ve included that but the title was already getting pretty long.
If I go through .each, then I’m aware of each element’s id and I can set up the callback accordingly.
Hey man, any chance we can see a demo? Thanks
Perfect! Although, I don’t see how you would need the value: val?
I was able to use it without.
wowww.. nice posting dude… keep posting 🙂
Nick, that is my fault – I removed a bit of code to make the demo easier and forgot to remove that piece (I needed to read the initial value of the slider from the corresponding input). I’ll try to throw a simple demo together and attach it to the post.
Hey Nick – I just uploaded a quick demo. Glad you were able to get it working without, but hopefully it’ll help others out.
Hi,
Thanks for the code. Is it possible to display a label instead of the value? eg: When I slide to 4, it should display Good instead of 4.
Calling $this on a “stop:” function gives undefined, can that be rectified somehow?
Okay, so what I mean is I added to each slider a data-whatever and I try to read that in for an ajax update on the fly on slider changes. But at adding the “stop” function to the slider’s js, with the appropriate code, $this comes back as undefined, when it should be able to handle the actually clicked on slider no? Appreciated 🙂
Do you mean $(this)? I haven’t done anything with the stop function but don’t see why it wouldn’t work. These examples could be way out of date by now though.
Greetings Alex, thank you for the code! Forgive my being a novice, but how do you call the slider value? Your example does present it at the top of each slider, how would I call or refer to that value say if I wanted to display it somewhere else as well?
I don’t think you’d want to “call” the slider to get its underlying value but there might be a way to get there. This is a hard question to answer without knowing how your system is structured though. Without knowing what your code looks like, the easiest thing that comes to mind is watching for changes on the form input backing the slider and using that to propagate your changes elsewhere. Maybe have a look here: https://api.jquery.com/change/