如何重置 jQuery UI 滑块？答案

【问题标题】：How to reset a jQuery UI slider?如何重置 jQuery UI 滑块？
【发布时间】：2012-02-17 16:15:52
【问题描述】：

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

单击按钮不会重置滑块。有什么线索吗？

【问题讨论】：

标签： javascript jquery jquery-ui-slider

【解决方案1】：

不存储您的原始选项/多个滑块重置

如果您不想存储原始值或者您有多个滑块，请尝试以下操作：

// Reset the sliders to their original min/max values
$('.slider').each(function(){

  var options = $(this).slider( 'option' );

  $(this).slider( 'values', [ options.min, options.max ] );

});

关于您的代码，请参阅this demo。

【讨论】：

与已接受的答案不同，此答案将 BOTH 句柄动画化回原位，而出于某种原因，已接受的答案仅将 Max 句柄动画化到原位，并“跳转”回 Min 句柄。跨度>
@publicravi 我添加了一个演示来向您展示如何在您的代码中使用它。

【解决方案2】：

对于范围滑块，您需要改用.slider("values", index, value) 方法。

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

【讨论】：

【解决方案3】：

在这里查看我的答案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] );           
       });
    });

【讨论】：

对不起！我仅根据时间顺序选择了亚历山大的答案。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案4】：

你可以试试

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

}

在需要滑块时调用函数PrimarySlider();并通过调用重置

function ResetPrimarySlider() {
   $( "#slider-range" ).slider("destroy");
   PrimarySlider();
}

【讨论】：

【解决方案5】：

您也可以在一行代码中重置（如果您使用滑块中的范围选项）

$("#slider-range").slider("option", "values", [some_min_val, some_max_val]);

【讨论】：