jquery - Two jquery-ui slider with tooltips have same value?

Question

i would like to have two jquery-ui sliders whereby i am using the following code as a template

http://jsfiddle.net/9qwmX/2/

when i add the second slider, the values of both tooltips are that of the most recent slider value and does not their distinct slider. the code defines the var toolip which is then reflected to all the sliders and not just the slider effected

                         var initialValue1 = 2012; // initial slider value
                    var sliderTooltip1 = function (event, ui) {
                        $('#amount1').val(ui.value);
                        var curValue1 = ui.value || initialValue1;
                        var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue1 + '</div><div class="tooltip-arrow"></div></div>';
                        $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle
                    }


                    $('#slider1').slider({
                        value: 100,
                        min: 0,
                        max: 500,
                        step: 1,
                        create: sliderTooltip1,
                        slide: sliderTooltip1
                    });
                    $('#amount1').val($('#slider1').slider('value'));

                    $('#amount1').change(function () {
                        var value = this.value;
                        //         var value = this.value.substring(1);
                        console.log(value);
                        $("#slider1").slider("value", parseInt(value));
                    });

note-this is a simple slider not a range-slider.

how can i get the tooltip values to have their distinct correct values. any help would be appreciated.

thks ken

Answer 1

You should specify the target because you were targeting all elements of class .ui-slider-handle:

http://jsfiddle.net/9qwmX/494/

var sliderTooltip = function(event, ui) {
    var curValue = ui.value || initialValue;
    var target = ui.handle || $('.ui-slider-handle');                                     
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>';
   $(target).html(tooltip);
}