jQuery slider minimum range
Question
I'm trying to implement the price range via jQueryUI by following https://jqueryui.com/slider/#range .
My code is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Slider - Range slider</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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>
<style>
.ui-widget.ui-widget-content {
border: 1px solid #c5c5c5;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 3px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 3px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 3px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
border-top-left-radius: 3px;
}
.ui-widget-content {
border: 1px solid #dddddd;
background: #ffffff;
color: #0065ff;
}
.ui-slider-horizontal {
height: .8em;
}
.ui-slider {
position: relative;
text-align: left;
}
.ui-slider-horizontal .ui-slider-range {
top: 0;
height: 100%;
}
.ui-slider .ui-slider-range {
position: absolute;
z-index: 1;
font-size: .7em;
display: block;
border: 0;
background-position: 0 0;
}
.ui-widget-header {
border: 1px solid #dddddd;
background: #e9e9e9;
background-position-x: 0%;
background-position-y: 0%;
color: #333333;
font-weight: bold;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
border: 1px solid #c5c5c5;
background: #f6f6f6;
font-weight: normal;
color: #454545;
}
.ui-slider-horizontal .ui-slider-handle {
top: -.3em;
margin-left: -.6em;
}
.ui-slider .ui-slider-handle {
position: absolute;
z-index: 2;
width: 1.2em;
height: 1.2em;
cursor: default;
-ms-touch-action: none;
touch-action: none;
}
</style>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</body>
</html>
There is one problem with range. I want to set minimum range that always has to be between two values. It means that I can put 10 as minimum distance and user can not make two ranges closer than 10. For example:
1) if the first range is set to 0 user can not change the second value for less than 10
2) if the second value is set to 100 user can not change the first value for more than 90
The value has to be parametrized (it could change during the work) via javascript.
How is it possible to solve my problem?
2 answers
solution1
3 ACCPTED 2018-09-24 18:01:46
Update your slide function like this:
if (ui.values[ 0 ] + 10 > ui.values[ 1 ]) {
return false;
}
That condition checks if first value plus 10 is bigger than second value. If yes then quit the function.
solution2
0 2018-09-24 17:58:36
Please use slider function as:
Add difference parameter and use it in slide function of slider:
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
difference:10,
values: [ 75, 300 ],
slide: function( event, ui ) {
var tmpVal = ui.values[ 1 ] - ui.values[ 0 ];
var minDifference = $( "#slider-range" ).slider( "option", "difference" );
if(minDifference && tmpVal < minDifference){
return false;
}
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
} );
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.