jQuery slider with value on drag handle/slider

Question

I am trying to display the value of the slider inside the drag handle (slider). Any resouce provided is much appreciated. I am using jQuery 1.5.1

Thanks

Answer 1

Are you using jQuery UI Slider ?

If so, this is a solution :

$("#slider").slider({
    change: function() {
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    },
    slide: function() {
        var value = $("#slider").slider("option","value");
        $("#slider").find(".ui-slider-handle").text(value);
    }
});

jsFiddle example here

Answer 2

Just wanted to add a little to the answer.

If you are setting an initial value, or you would like the text to appear on the handle before the slide method is called you will need to add the document ready bit at the bottom, but i have also condensed the code a little

   // take value from event, ui.value
   $("#slider1").slider({
      slide: function (event, ui) {
          $("#slider").find(".ui-slider-handle").text(ui.value);
      }
   });

   // sets text initially to value of slider, even if a default value is set
   $(document).ready(function() {
       var value = $("#slider").slider("option","value");
       $("#slider").find(".ui-slider-handle").text(value); 
   });

Answer 3

Thx all, I have solution for jQuery ui slider with value on drag different handles.
Example for 2 handles:

$("#wt-altitude-range").slider({
    range: true,
    min: 0,
    max: 3000,
    values: [ 100, 2500 ],
    slide: function(event, ui) {
        $(ui.handle).text(ui.value);
    }
});

Work for slide event. ui.handle - current handle, ui.value - current value.