Question

2

How to reset a jQuery UI slider?

rated 0 times [ 7] [ 5] / answers: 1 / hits: 37400 / 13 Years ago, fri, february 17, 2012, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

adam

Add To Favorites

Follow

Total Points: 363

Total Questions: 102

Total Answers: 104

Location: Burkina Faso

Member since Thu, Dec 15, 2022

1 Year ago

answered 13 Years ago josefn · Accepted Answer

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>