Error : cannot call methods on slider prior to initialization attempted to call method 'value'

Question

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.

Answer 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,

Answer 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.

Answer 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
});

Answer 4

i had a similar problem. your block here

$(".PLUS").click(function() {
     var value = $("#slider-result").slider("value")
      , step = $("#slider-result").slider("option", "step");
      $("#slider-result").slider("value", value + step);
});

just keep it under

create: function( event, ui ) {}

ie.

create: function( event, ui ) {
    $(".PLUS").click(function() {
      var value = ui.value;
      , step = $("#slider-result").slider("option", "step");
      $("#slider-result").slider("value", value + step);
  });
}

hope this works.

Answer 5

The best way I found to achieve this is to use the event from the ON function from the slider library to get the value. Ex:

slider.on('slideStop', function(ev) {
    let value= ev.value; //try ev if you want to see all
    console.log(value);
})

Regards