I am using this / for a slider in a page I am working on,I don't understand the api. Can someone help me with this ?

$(..).slider('getValue')

returns the dom element while I saw this in the code

$(..).slider().getValue() 

which returns a method not found error. I am aware of the .slide event which can be used for this,but how do you access the value directly ?

I am using this http://www.eyecon.ro/bootstrap-slider/ for a slider in a page I am working on,I don't understand the api. Can someone help me with this ?

$(..).slider('getValue')

returns the dom element while I saw this in the code

$(..).slider().getValue() 

which returns a method not found error. I am aware of the .slide event which can be used for this,but how do you access the value directly ?

• javascript
• twitter-bootstrap
• slider

• The first option looks fine. Can you show your markup please? – reggaemahn Commented Jul 26, 2013 at 11:00
• Are all the libraries included? – Dhaval Marthak Commented Jul 26, 2013 at 11:04
• possible duplicate of How to get the value of the slider bootstrap? – SunnyRed Commented Oct 9, 2013 at 19:45

5 Answers 5

I'am using it this way

<input type="text" id="slider1" class="span2 slider" value="80" data-slider-min="50" data-slider-max="90" data-slider-step="0.1" data-slider-value="83"  data-slider-selection="after" data-slider-tooltip="hide">
 $('.slider').on('slide', function (ev) {
        console.log($('#slider1').val());


    });

So I access value with $('#slider1').val(). I hope this is going to be helpful

The slider is technically a text input field.

So you can simply use $("#inputFieldID").val()

This will not provide any value until the slider is moved. So specify the initial value using the value attribute of the input tag.

you can use this from the built in function

$("#rating").slider({
    change: function( event, ui ) {
        userRating = ui.value;
        // this will give you the real value of the slider after the change.
        alert(userRating); 
    }
});

and thank you i thought i coud share this with you guys :D

$('#idSlider').data('slider').getValue();

This should work in bootstrap5:

<input type="range" id="slider1" class="form-range" min="1" max="10" step="0.5" value="7" />

<span id="slider1_val"></span>

$("#slider1").on("change", function() {
    $("#slider1_val").text($('#slider1').val());
});