$(document).ready(function() { $("#slider").slider({ min: 0, max: 2000, step: 1000, value: 0, animate: 'slow', range: "min" }); }); 
 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="slider"></div>

too abruptly does it go between scales

    1 answer 1

    The animate property in jQuery UI Slider allows you to animate the slider only when you click on the scale. But with such small tricks you can add animation while moving the slider with the mouse.

     $("#slider").slider({ min: 0, max: 2000, step: 1000, value: 0, animate: 'slow', range: "min" }); $('#slider span').on('mousedown mouseup', function() { $(this).closest('#slider').toggleClass('animated'); }); 
     #slider.animated .ui-slider-handle { transition: left 0.5s linear; } #slider.animated .ui-slider-range { transition: width 0.5s linear; } 
     <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="slider"></div>