可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
<!-- 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?
回答1:
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>
回答2:
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.
回答3:
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] ); }); });
回答4:
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]);
回答5:
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(); }
