How to handle jQuery UI sliders correctly?
Question
I'm writing an web applicatoin that updates some jQuery UI sliders via JavaScript. I ran into many problems with update the slider after the initialization but solved the most. The following issue is still open and I don't see the leak.
The first slider is the reference slider which values will be checked. The second and third slider represents the dynamic changes the visitor can make on the website that causes the range change of the reference slider. Unfortunally I can't get back to minimum 0 or maximum 100 once after I update the second and/or third sliders. The minimum value will be 1 and the maximum will be 99 .
The following code contains a fully featured demo to reproduce this issue. The code is the same expect of the naming.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slider Demo</title>
<style type="text/css">
.slider { margin: 20pt 10pt; }
#log { height: 100pt; overflow: auto; border: 1pt solid silver; }
</style>
</head>
<body>
<h1>jQuery Slider Demo</h1>
<strong>Range: <var id="slider-value"></var></strong>
<div id="slider" class="slider"></div>
<strong>Minimum: <var id="slider-min-value"></var></strong>
<div id="slider-min" class="slider"></div>
<strong>Maximum: <var id="slider-max-value"></var></strong>
<div id="slider-max" class="slider"></div>
<strong>Log:</strong>
<pre id="log" class="slider"></pre>
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- jQuery UI -->
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!-- Application -->
<script type="text/javascript">
function log (msg) {
$('#log').html( msg + "\n" + $('#log').html() );
}
function _newrange ( slider, min, max, reset ) {
if ( reset ) reset = true; else reset = false;
if ( slider == null || slider.slider() == null ) {
log( 'slider parameter is not a slider' );
return false;
}
if ( min == null || /^[0-9]+$/.exec(min) == null ) {
log( 'min parameter is not a number' );
return false;
}
if ( max == null || /^[0-9]+$/.exec(max) == null ) {
log( 'max parameter is not a number' );
return false;
}
var oldmin = slider.slider( 'option', 'min' );
var oldmax = slider.slider( 'option', 'max' );
var oldvalmin = slider.slider( 'values', 0 );
var oldvalmax = slider.slider( 'values', 1 );
var newvalmin = min;
var newvalmax = max;
if ( !reset ) {
if ( newvalmin >= min ) newvalmin = oldvalmin;
if ( newvalmax <= max ) newvalmax = oldvalmax;
if ( oldvalmin == oldmin ) newvalmin = min;
if ( oldvalmax == oldmax ) newvalmax = max;
}
slider.slider( 'option', 'min', min );
slider.slider( 'option', 'max', max );
slider.slider( 'option', 'values', [ newvalmin, newvalmax ] );
log( 'new slider range from minimum ' + min + ' up to maximum ' + max );
return false;
}
function newrange () {
_newrange(
$('#slider'),
$('#slider-min').slider( 'value' ),
$('#slider-max').slider( 'value' )
);
$('#slider-value').html( $('#slider').slider( 'values', 0 ) + ' - ' + $('#slider').slider( 'values', 1 ) );
$('#slider-min-value').html( $('#slider-min').slider( 'value' ) );
$('#slider-max-value').html( $('#slider-max').slider( 'value' ) );
}
$(document).ready(function(){
$('#slider-min').slider({
range: 'min',
min: 0,
max: 49,
value: 0,
slide: function( event, widget ) { newrange(); }
});
$('#slider-max').slider({
range: 'max',
min: 50,
max: 100,
value: 100,
slide: function( event, widget ) { newrange(); }
});
$('#slider').slider({
range: true,
min: $('#slider-min').slider( 'option', 'min' ),
max: $('#slider-max').slider( 'option', 'max' ),
values: [ $('#slider-min').slider( 'option', 'min' ), $('#slider-max').slider( 'option', 'max' ) ],
slide: function( event, widget ) {
$('#slider-value').html( widget.values[0] + ' - ' + widget.values[1] );
log( 'new slider values from ' + widget.values[0] + ' up to ' + widget.values[1] );
}
});
newrange();
});
</script>
</body>
</html>
2 answers
solution1
0 2013-06-12 12:56:54
Looks ilke a bug in the jQuery slider, in this dem o the least value of the slider is 1 instead of 0, moving 1 point to right gives the value 0
<strong>Minimum: <var id="slider-min-value"></var></strong>
<div id="slider-min" class="slider"></div>
and
$('#slider-min').slider({
range: 'min',
min: 0,
max: 49,
value: 0,
slide: function( event, widget ) {
$('#slider-min-value').html( $('#slider-min').slider( 'value' ) );
//newrange();
}
});
solution2
0 ACCPTED 2013-07-03 13:58:08
It was my fault. I thought that the slide event will give me the new values but it won't. slide returns the old values. stop is the event I need.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.