How to reset a jQuery UI slider?

Asked 17/2, 2012 at 16:15 Answered 14/12, 2014 at 8:20

Solved javascript jquery jquery-ui-slider

    <!-- 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?

Dumpy answered 17/2, 2012 at 16:15 Comment(0)

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>

Honeyed answered 17/2, 2012 at 16:44 Comment(0)

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.

Noshow answered 13/11, 2013 at 9:55 Comment(2)

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. – Dainedainty 1/7, 2014 at 12:44

@publicravi I added a demo to show you how to use this in your code. – Noshow 30/12, 2015 at 6:7

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>

Honeyed answered 17/2, 2012 at 16:44 Comment(0)

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

Cephalothorax answered 17/2, 2012 at 17:51 Comment(2)

Sorry! I chose Alexander's answer only based on chronological order. – Dumpy 17/2, 2012 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. – Courcy 5/3, 2014 at 16:46

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

Survivor answered 14/12, 2014 at 8:20 Comment(0)

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

Thymic answered 28/9, 2013 at 13:39 Comment(0)

Not storing your original options / multiple slider reset

Recommended topics

Hot tags