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?

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?

• javascript
• asp-mvc
• twitter-bootstrap

5 Answers 5

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)

You were so close. Try this.

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

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];

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

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