How to reset a jQuery UI slider? How to reset a jQuery UI slider? javascript javascript

How to reset a jQuery UI slider?


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.


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> 


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