CODEWITHSUNDEEP
javascriptjqueryslider
indit
indit

Reputation: 325

jQuery slider with value on drag handle/slider

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

Upvotes: 5

Views: 15847

Answers (3)

Max P
Max P

Reputation: 1459

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.

Upvotes: 4

Joseph de Ronde
Joseph de Ronde

Reputation: 81

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); 
   });

Upvotes: 8

Sylvain
Sylvain

Reputation: 3873

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

Upvotes: 13

Related Questions