How do i get current value from bootstrap slider?

Question

This is related to my question which i asked in this link How do i get Min and Max value of Bootstrap slider?

I was not able to get answer for this particular question in that discussion, thats why i planed to ask it as new question.

What i need is to get current min and max value from bootstrap slider control in my javascript.

This is how my control looks like

<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]" />

And in my button click i tried to get its min ans max value using following

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

But it always returns Min as 0 and Max as 1000 even its set as Min 2 and Max 10.

How do i get 2 and 10 in my javascript?

Bootstrap does not have an "official" slider component. If you are using some third party plugin, make sure you specify which. — martynasma, Jul 02 '15 at 06:52

Piotr Czarnecki · Accepted Answer · 2015-07-02T08:38:15.610

2

For sure you can do this that way:

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

UPDATE

Probably you need:

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

In general if you want to access widget data which is created using Widget Factory (https://learn.jquery.com/jquery-ui/widget-factory/how-to-use-the-widget-factory/) you can do this using this pattern:

var widget = $(selector).data(widget_name);

So if you initialize widget like for example:

$('#ex1').datepicker();

You can access widget data by:

var datepicker = $('#ex1').data('datepicker');

And usually widget params are in 'options' property.

Use some Firebug or other web dev tool and play with that you could see what you can access and how.

Regards Piotr

edited Jul 02 '15 at 08:38

answered Jul 02 '15 at 06:58

Piotr Czarnecki

1,688
3
14
22

I have updated here, https://jsfiddle.net/xjzhapcn/ But i cant load the control with slider. I think there is some reference issue. Also from code i pasted you will get idea on how i am doing this – Nithin Paul Jul 02 '15 at 07:26
Catch that with little modification: https://jsfiddle.net/xjzhapcn/7/ I got 0 and 5 is that what you want? – Piotr Czarnecki Jul 02 '15 at 07:38
No I need the current value of min and max. Not the value from data-slider-min="0" data-slider-max="5" – Nithin Paul Jul 02 '15 at 08:27
1

Ok catch update https://jsfiddle.net/xjzhapcn/8/ So what you need is: var min1 = $('#crSlider').data('slider').options.value[0]; var max2 = $('#crSlider').data('slider').options.value[1]; – Piotr Czarnecki Jul 02 '15 at 08:36
Ohhh man, thanks finally its working. Once again thanks alot :) – Nithin Paul Jul 02 '15 at 08:42
Can you also tell me how can i set values back to my defaults using above? that is Min = 0 and Max = 5 suppose after reset button click. – Nithin Paul Jul 02 '15 at 12:38
1

$('#crSlider').data('slider').setValue([0,5]); – Piotr Czarnecki Jul 02 '15 at 12:54
Working like charm :) – Nithin Paul Jul 03 '15 at 03:47

How do i get current value from bootstrap slider?

1 Answers1