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?
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 (ie $("#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');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.