Handling multiple jquery sliders

Question

Im trying to make multiple jquery sliders that dynamically create a span with the value, but I am getting an instance of the value for each slider.

take a look at the fiddle http://jsfiddle.net/houareau/RvSgj/182/

or

var a = 0;
$(".slider").each(function() {
var slider = this;
$(slider).slider({
    value : 5,
    min   : 1,
    max   : $(this).data('max'),
    step  : 1,
    slide : function (event, ui) {
       a = ui.value;
       $(slider).next().find('span.sliderValue').html(ui.value);
    }
});
});

Answer 1

You forgot to post the create function, which is the real issue here, you're appending both spans to both sliders.

$(".slider").each(function () {
    $(this).slider({
        min: 0,
        max: $(this).data('max'),
        step: 1,
        create: function (event, ui) {
            $(event.target).find('a').append($(event.target).next('.sliderValue'));
        },
        slide: function (event, ui) {
            $(ui.handle).find('span.sliderValue').html(ui.value);
        }
    });
});

FIDDLE

And do not use a global variable to get the values, you can get a sliders value at any time by calling $( ".selector" ).slider( "value" );

Answer 2

Yay, here is the new fiddle !

$(".slider").slider({
min: 0,
max: $(this).data('max'),
step: 1,
    create: function (event, ui) {           
        $(event.target).find('a').append( $('<span />').addClass('sliderValue') )
    },
slide: function (event, ui) {
    $(ui.handle).find('span.sliderValue').html(ui.value);
}

});