Menu
<!-- 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?
265
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).
Syntax: $( ". selector" ). slider("refresh");
Syntax: $( ". selector" ). slider("value");
jQuery UI slider is used to obtain a numeric value within a certain range. The main advantage of slider over text input is that it becomes impossible for the users to enter an invalid value. Every value they can pick with the slider is valid.
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.
129
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>
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] );
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
