How to reset a jQuery UI slider?

Answer 1

You also can reset in one line of code (if you use the range option in slider)

$("#slider-range").slider("option", "values", [some_min_val, some_max_val]);

Answer 2

Check out my answer here jsfiddle

$(function() {
    var options = 
        {
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        };

        $( "#slider-range" ).slider(
            options
        );
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );

    $("#button").click(function()
       {
           $("#slider-range").slider("values", 0, options.values[0]);  
           $("#slider-range").slider("values", 1, options.values[1] ); 
           $( "#amount" ).val( "$" + options.values[0] + " - $" + options.values[1] );           
       });
    });

Answer 3

You may try as

function PrimarySlider() {  
 $( "#slider-range" ).slider({
            range: true,
            min: 0,
            max: 500,
            values: [ 75, 300 ],
            slide: function( event, ui ) {
                $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
            }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
            " - $" + $( "#slider-range" ).slider( "values", 1 ) );
    });

}  

call the function PrimarySlider(); whenever you need slider and reset by calling

function ResetPrimarySlider() {
   $( "#slider-range" ).slider("destroy");
   PrimarySlider();
}

Answer 4

Not storing your original options / multiple slider reset

If you don't want to store your original value or you have multiple sliders try this:

// Reset the sliders to their original min/max values
$('.slider').each(function(){

  var options = $(this).slider( 'option' );

  $(this).slider( 'values', [ options.min, options.max ] );

});

In relation to your code see this demo.

Answer 5

For Range Sliders you need to use the method .slider("values", index, value) instead.

<script>
function resetSlider() {
  var $slider = $("#slider-range");
  $slider.slider("values", 0, initialMinimumValue);
  $slider.slider("values", 1, initialMaximumValue);
}
</script>
<button type="button" onclick='resetSlider();'>Test</button>