seiyria / bootstrap-slider

A slider control for Bootstrap 3 & 4.
http://seiyria.github.io/bootstrap-slider/
Other
3k stars 1.14k forks source link

Calling getValue on range slider generate error #860

Closed aleinnocenzi closed 5 years ago

aleinnocenzi commented 5 years ago

I have created a range slider because I need min and max value in my filter. But when I call

$("#myslider").bootstrapSlider("getValue");

I get the following error

cannot call methods on bootstrapSlider prior to initialization; attempted to call 'getValue'

It seems getValue method only works with single value slider, indeed if I initialize with only one value, the methods return the value correctly, but this is not working on min/max slider.

seiyria commented 5 years ago

Please add jsfiddle

rizkhan7 commented 5 years ago

I have the same problem...looking for a working example of getting and setting values of a range slider using jquery or javascript...any help would be most appreciated :)

rizkhan7 commented 5 years ago

Ok worked it out here it is

var slider = new Slider("#yourSliderID"); slider.on("slide", function(sliderValue) { var leftSliderValue = sliderValue[0]; var rightSliderValue = sliderValue[1]; });

jespirit commented 5 years ago

I don't seem to have this problem. I think it probably has to do with loading the jQuery library after loading Bootstrap-Slider. If you're going to use jQuery, make sure to include the jQuery library before including the Bootstrap-Slider javascript file. See the example in the JSFiddle.

Here's a JSFiddle https://jsfiddle.net/u9akwL4q/ that demonstrates how to use getValue when the alternate namespace bootstrapSlider is used instead of slider. First open the console window and click on the 'getValue' button.

jespirit commented 5 years ago

I was able to reproduce the error, but it is very contrived. See here: https://jsfiddle.net/u9akwL4q/1/

I had to call $.data(element, key, value) and set the value associated with the element to null with $.data($("#slider"), 'bootstrapSlider', null) so that the call to getValue() would not work and print an error message in the console.

jespirit commented 5 years ago

I ran into a problem like this when I was trying to display the slider when I initially hid the slider with display: none.

The problem is that you can't target the id of the slider (the one passed to the constructor). Instead, you need to the target the id given to the input element.

// Wrong:
$('#mySlider').bootstrapSlider('getValue');
// Target the id of the input element, not the id passed to the constructor
$('#sliderInput').bootstrapSlider('getValue');

This is the JSFiddle that reproduces the error message.

https://jsfiddle.net/583jgs6x/

You can set value to [4, 5] if you want to test a range slider.