如何重置jQuery UI滑块？

      $(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 ) ); });   
 
 Price range:  
 
 
  Test  

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

Answer 1

对于Range Sliders，您需要使用方法.slider("values", index, value) 。

  Test 

Answer 2

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

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

 // Reset the sliders to their original min/max values $('.slider').each(function(){ var options = $(this).slider( 'option' ); $(this).slider( 'values', [ options.min, options.max ] ); }); 

关于您的代码，请参阅此演示 。

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

Answer 4

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

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

Answer 5

你可以尝试

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