CODEWITHSUNDEEP
javascriptjqueryjquery-uislider
S16
S16

Reputation: 2995

jquery ui slider value on slider

I'm curious if anyone has a pre-existing solution to putting the value of the slider in the handle of the slider itself beyond the following:

    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        }

Note: This does not set the initial value of the slider, but I'm aware it needs to be done.

Upvotes: 1

Views: 2867

Answers (2)

user3270454
user3270454

Reputation:

An update to this if you're using a range slider to set each slider individually 

$("#slider-vertical").slider({
        range: true,
        min:0,
        max:500,
        values:[1,300],
        slide: function( event, ui ) {
            $(ui.handle).text(ui.value);
        },
        create: function(event, ui) {
            var v = $(this).slider('values');
            var c = 0;
            $(this).find('.ui-slider-handle').each(function(){
                $(this).first().text(v[c]);
                c++;
            });
        }   
});

Upvotes: 0

The Alpha
The Alpha

Reputation: 146269

Try this

​$(function(){
    $( "#slider-vertical" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        create: function(event, ui) {
            var v=$(this).slider('value');
            $(this).find('.ui-slider-handle').text(v);
        }
    });    
});​

DEMO.

Upvotes: 3

Related Questions