jQuery UI Slider updating step attribute but not working

Question

I am using a jQuery range slider plugin named asRange

It's working quite alright, but when I am updating the step attribute with a conditional statement, it's updating the value in the DOM alright but not quite working as expected. I need the step value to be "0.001" when the range value is less than 1 and step to be "1" when the range value is more than 1.

If you examine the DOM elements with the developer tools, you will see the step value is updating properly, but not working as it should.

I have been trying on it for hours now. Couldn't find anything. Any sort of help would be much appreciated.

            <input class="range-slider" type="range" min="0.007" max="10" name="price" step="0.001" />
            <script>
              $(document).ready(function() {
                $(".range-slider").asRange();

                $(".range-slider").on('asRange::change', function (e) {
                var val = $(".range-slider").asRange('get');

                  if (val > 1) 
              {
                  $(".range-slider").attr("step" , "1");
              }
              else if (val <= 1) 
              {
                  $(".range-slider").attr("step" , "0.001");
              }


              });
              });
            </script>

Answer 1

Use the update method of the library instead:

$(document).ready(function() {
  $(".range-slider").asRange();

  $(".range-slider").on('asRange::change', function(e) {
    var val = $(".range-slider").asRange('get');

    if (val > 1) {
      $(".range-slider").asRange('update', { step: 1 }); // Here
    } else if (val <= 1) {
      $(".range-slider").asRange('update', { step: 0.001 }); // And Here
    }
  });
});

The DOM element is no more updating the object asRange, then, when you change the DOM element, the asRange created object will not be reflected.