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