CODEWITHSUNDEEP
javascriptasp.net-mvctwitter-bootstrap
Nithin Paul
Nithin Paul

Reputation: 2199

How do i get Min and Max value of Bootstrap slider?

I have the following slider in my razor

<input id="rbSlider" type="text" class="span2" value="" data-slider-min="0" data-slider-max="1000" data-slider-step="5" data-slider-value="[0,1000]" />

On Click, i need to get its current Min and Max values.

i tried using following without luck,

    var min = $('#rbSlider').data('slider').min;
    var max = $('#rbSlider').data('slider').max;

Its returning not defined error, How do i get min and max?

Upvotes: 2

Views: 5981

Answers (5)

Addison Klinke
Addison Klinke

Reputation: 1176

Improvement for dynamically set limits

@jcuenod's answer will retrieve the min/max values as set in the initial HTML's DOM. However, if you are changing the limits later via JavaScript (i.e. $("#rbSlider").slider('option', {min: 5, max: 100})), this will not get you the up-to-date values

Instead, you need to use $("#rbSlider").data('slider').options.max

Upvotes: 1

Ravi Shankar
Ravi Shankar

Reputation: 153

var min = $('#rbSlider').slider('option','min');
var max = $('#rbSlider').slider('option','max');

Upvotes: 0

Nithin Paul
Nithin Paul

Reputation: 2199

Oh finally i got it working using the following 

var min = $('#rbSlider').data('slider').options.value[0];
var max = $('#rbSlider').data('slider').options.value[1];

Upvotes: 1

jcuenod
jcuenod

Reputation: 58375

You almost had it. The attributes data-slider-min="0" data-slider-max="1000" can be accessed like this:

var min = $('#rbSlider').data('sliderMin');
var max = $('#rbSlider').data('sliderMax');

Note that I have removed the - and used CamelCase. Take a look at the API and you will see that jQuery takes $( "div" ).data( "lastValue" ) === 43;:

... searches among the attributes of the element, converting a camel-cased string into a dashed string and then prepending data- to the result. So, the string lastValue is converted to data-last-value.

So for consistency, use camel casing (just watch out for this)

Upvotes: 3

Nitin Varpe
Nitin Varpe

Reputation: 10694

You were so close. Try this. 

var min = $('#rbSlider').data('slider-min');
var max = $('#rbSlider').data('slider-max');

Upvotes: 2

Related Questions