Question

I’m using jQuery UI to create 6 sliders with the same options (survey).

I was wondering if there is a way to combine all of these sliders into one function, but have them operable individually?

If so, would it be something like this:

$('#slider').each(function () {
    var $this = $(this).closest('#slider');

    $($this).slider(
    {
        value: 100,
        min: 0,
        max: 100,
        step: 25,
        slide: function (event, ui) {
            $('#amount').val('$' + ui.value);
        }
    });
    $('#amount').val($('#slider').slider("value"));

I looked around to see if I could find some related questions, but I still can’t solve it. Right now, only the first out of 6 sliders is visible.

Answer 1

Not sure what the issue is. This jsFiddle example shows that it’s just a basic setup. moving any slider shows that slider’s value in the input field.

jQuery

$('.slider').slider({
    slide: function(event, ui) {
        $('input:eq('+ $(this).index() +')').val(ui.value);
    }
});​

HTML

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<input /><br />
<input /><br />
<input /><br />
<input /><br />
<input /><br />
<input />​

Edit: updated code to reflect comment.