Error : cannot call methods on slider prior to initialization attempted to call method 'value'
Solution 1
If we check error in detail you will notice that it says you are trying to call the value
method before the initialization of slider plugin.
Reason:
Actually JavaScript is an interpreted language, and it doesn't wait for first command to execute and finish. That's why your $(".slider").slider({
and $(".PLUS").click(function() {
lines run at same time and the error occurs.
Solution:
You can put your code in setTimeout
function here is an example given below.
<script>
$(function() {
$(".slider").slider({
animate: true,
range: "min",
value: 18,
min: 18,
max: 70,
step: 1,
slide: function(event, ui) {
$("#slider-result").html(ui.value);
document.getElementById(findElement('ageId')).value = ui.value;
},
//this updates the hidden form field so we can submit the data using a form
change: function(event, ui) {
$('#hidden').attr('value', ui.value);
}
});
setTimeout(function(){
$(".PLUS").click(function() {
var value = $("#slider-result").slider("value"),
step = $("#slider-result").slider("option", "step");
$("#slider-result").slider("value", value + step);
});
},200); // 200 = 0.2 seconds = 200 miliseconds
});
</script>
I hope this will help you/someone.
Regards,
Solution 2
You have used $(".slider").slider()
at the time of initializing and
$("#slider-result").slider()
at the time of getting the value some plugins work on selector you have used at the time of init, so try that.
Solution 3
The error is caused because $("#slider-result")
is not the element initialized as slider and you're trying to execute slider widget methods on it instead of $(".slider")
which is the actual slider.
Your code should be
$(".PLUS").click(function() {
var value = $(".slider").slider("value"),
step = $(".slider").slider("option", "step");
$("#slider-result").text(value + step);
//---- maybe you'll need to ----^---- parseInt() the values here
});
Rishiraj Fasalkar
Updated on June 26, 2022Comments
-
Rishiraj Fasalkar almost 2 years
I have written something like below. onclick of div with id "PLUS" I am getting the following error:
cannot call methods on slider prior to initialization attempted to call method 'value'
<div id="PLUS" class="PLUS"></div> <script> $(function() { $(".slider").slider({ animate: true, range: "min", value: 18, min: 18, max: 70, step: 1, slide: function(event, ui) { $("#slider-result").html(ui.value); document.getElementById(findElement('ageId')).value = ui.value; }, //this updates the hidden form field so we can submit the data using a form change: function(event, ui) { $('#hidden').attr('value', ui.value); } }); $(".PLUS").click(function() { var value = $("#slider-result").slider("value"), step = $("#slider-result").slider("option", "step"); $("#slider-result").slider("value", value + step); }); }); </script>
Any help is appreciated.