How to reset a jQuery UI slider?

Question

    <!-- dirty -->
    <head>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

    <script>
    $(function() {
        $( "#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 ) );
    });
    </script>

    </head>

    <div class="demo">

    <p>
        <label for="amount">Price range:</label>
        <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
    </p>

    <div id="slider-range"></div>

    </div>

    <button type="button" 
onclick='$("#slider-range").slider("value", $("#slider-range").slider("option", "min") );'>
Test
</button>

Clicking on the button does not reset the slider. Any clues?

hitautodestruct · Answer 1 · 2021-04-21T11:18:16.117

20

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.

edited Apr 21 '21 at 11:18

answered Nov 13 '13 at 09:55

hitautodestruct

20,081
13
69
93

1

Unlike the accepted answer, this answer animates BOTH handles back to their place, while the accepted answer for some reason only animates the Max handle to its place, and "JUMPS" back the Min handle. – Dor Moshkovitz Jul 01 '14 at 12:44
@publicravi I added a demo to show you how to use this in your code. – hitautodestruct Dec 30 '15 at 06:07

score 16 · Accepted Answer · answered Feb 17 '12 at 16:44

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>

score 5 · Answer 3 · edited Mar 11 '14 at 10:05

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

Sorry! I chose Alexander's answer only based on chronological order. — publicRavi, Feb 17 '12 at 20:39
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — ProgramFOX, Mar 05 '14 at 16:46

score 3 · Answer 4 · answered Dec 14 '14 at 08:20

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

score 2 · Answer 5 · answered Sep 28 '13 at 13:39

2

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

answered Sep 28 '13 at 13:39

Daniel

36,833
10
119
200

How to reset a jQuery UI slider?

5 Answers5

Not storing your original options / multiple slider reset

Linked