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!

Related Posts