jQuery UI Slider - Only allow one direction and remove Range
Question
I have two sliders. I want my slider to slide in only one direction ie from left- right. I want to remove right hand side slider. Is there any way to remove it? I can not change the code for this slider. here is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Eligibility Slider</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="price-slider">
<h4 class="great">Loan Amount</h4>
<div class="col-sm-12">
<div id="slider1"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Monthly Income</h4>
<div class="col-sm-12">
<div id="slider2"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Tenure</h4>
<div class="col-sm-12">
<div id="slider3"></div>
</div>
</div>
<div class="price-slider">
<h4 class="great">Rate Of Interest</h4>
<div class="col-sm-12">
<div id="slider4"></div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="price-box">
<div class="form-group">
<label for="amount" class="col-sm-12 control-label">Loan Amount </label>
<div class="col-sm-12">
<div id="amount"> </div>
<div id="slider1"> </div>
<span class="price">.00</span>
</div>
</div>
<div class="form-group">
<label for="income" class="col-sm-12 control-label">Monthly Income </label>
<div class="col-sm-12">
<div id="income"> </div>
<div id="slider2"> </div>
<span class="price">.00</span>
</div>
</div>
<div class="form-group">
<label for="tenure" class="col-sm-12 control-label">Tenure </label>
<div class="col-sm-12">
<div id="duration"> </div>
<div id="slider3"> </div>
<span class="price">Months</span>
</div>
</div>
<div class="form-group">
<label for="interest" class="col-sm-12 control-label">Rate Of Interest </label>
<div class="col-sm-12">
<div id="interest"> </div>
<div id="slider4"> </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
$('#slider1').slider({
range: true,
min: 100000,
max: 20000000,
values: [100000, 20000000],
step: 100000,
create: function () {
var val = "1,00,000";
console.log(val);
$("#amount").text(val);
},
slide: function (event, ui) {
var val = ui.values[0].toLocaleString('us-US');
console.log(val);
$("#amount").text(val);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
function filterSystem(minPrice, maxPrice) {
$("li.column").hide().filter(function () {
var price = parseInt(jQuery(this).data("price"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
$(document).ready(function () {
$('#slider2').slider({
range: true,
min: 10000,
max: 200000,
values: [10000, 200000],
step: 1000,
create: function () {
var val = "10,000";
console.log(val);
$("#income").text(val);
},
slide: function (event, ui) {
var val = ui.values[0].toLocaleString('us-US');
console.log(val);
$("#income").text(val);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
$(document).ready(function () {
$('#slider3').slider({
range: true,
min: 1,
max: 360,
values: [1, 360],
step: 1,
create: function () {
var val = "1";
console.log(val);
$("#duration").text(val);
},
slide: function (event, ui) {
var val = ui.values[0].toLocaleString('us-US');
console.log(val);
$("#duration").text(val);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
$(document).ready(function () {
$('#slider4').slider({
range: true,
min: 6,
max: 20,
values: [6, 20],
step: 0.25,
create: function () {
var val = "6";
console.log(val);
$("#interest").text(val);
},
slide: function (event, ui) {
var val = ui.values[0].toLocaleString('us-US');
console.log(val);
$("#interest").text(val);
var mi = ui.values[0];
var mx = ui.values[1];
filterSystem(mi, mx);
}
})
});
function filterSystem(minPrice, maxPrice) {
$("li.column").hide().filter(function () {
var price = parseInt(jQuery(this).data("price"), 10);
return price >= minPrice && price <= maxPrice;
}).show();
}
</script>
</body>
</html>
2 answers
solution1
1 ACCPTED 2015-11-04 08:43:10
$(document).ready(function() { $('#slider1').slider({ range: false, min: 100000, max: 20000000, values: [100000], step: 100000, create: function() { var val = "1,00,000"; console.log(val); $("#amount").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#amount").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); function filterSystem(minPrice, maxPrice) { $("li.column").hide().filter(function() { var price = parseInt(jQuery(this).data("price"), 10); return price >= minPrice && price <= maxPrice; }).show(); } $(document).ready(function() { $('#slider2').slider({ range: false, min: 10000, max: 200000, values: [10000], step: 1000, create: function() { var val = "10,000"; console.log(val); $("#income").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#income").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); $(document).ready(function() { $('#slider3').slider({ range: false, min: 1, max: 360, values: [1], step: 1, create: function() { var val = "1"; console.log(val); $("#duration").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#duration").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); $(document).ready(function() { $('#slider4').slider({ range: false, min: 6, max: 20, values: [6], step: 0.25, create: function() { var val = "6"; console.log(val); $("#interest").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#interest").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); function filterSystem(minPrice, maxPrice) { $("li.column").hide().filter(function() { var price = parseInt(jQuery(this).data("price"), 10); return price >= minPrice && price <= maxPrice; }).show(); }
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="price-slider"> <h4 class="great">Loan Amount</h4> <div class="col-sm-12"> <div id="slider1"></div> </div> </div> <div class="price-slider"> <h4 class="great">Monthly Income</h4> <div class="col-sm-12"> <div id="slider2"></div> </div> </div> <div class="price-slider"> <h4 class="great">Tenure</h4> <div class="col-sm-12"> <div id="slider3"></div> </div> </div> <div class="price-slider"> <h4 class="great">Rate Of Interest</h4> <div class="col-sm-12"> <div id="slider4"></div> </div> </div> </div> <div class="col-sm-4"> <div class="price-box"> <div class="form-group"> <label for="amount" class="col-sm-12 control-label">Loan Amount</label> <div class="col-sm-12"> <div id="amount"></div> <div id="slider1"></div> <span class="price">.00</span> </div> </div> <div class="form-group"> <label for="income" class="col-sm-12 control-label">Monthly Income</label> <div class="col-sm-12"> <div id="income"></div> <div id="slider2"></div> <span class="price">.00</span> </div> </div> <div class="form-group"> <label for="tenure" class="col-sm-12 control-label">Tenure</label> <div class="col-sm-12"> <div id="duration"></div> <div id="slider3"></div> <span class="price">Months</span> </div> </div> <div class="form-group"> <label for="interest" class="col-sm-12 control-label">Rate Of Interest</label> <div class="col-sm-12"> <div id="interest"></div> <div id="slider4"></div> </div> </div> </div> </div> </div> </div>
solution2
1 2015-11-04 08:51:11
To get 1 handle, remove the range and have one value in the values array.
$('#slider1').slider({
min: 100000,
max: 20000000,
values: [100000],
step: 100000,
create: function () {
var val = "1,00,000";
$("#amount").text(val);
},
slide: function (event, ui) {
var val = ui.values[0];
if(!$(this).data('old-value') || val >= $(this).data('old-value')){
$(this).data('old-value', val);
return true;
}
return false;
}
});
to force the slider in one direction, you need to return true/false in the slide event. An example would be to store the old-value in data and check on slide.
See the top slider in this Fiddle for an example.
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.
Related Question
JQuery ui range slider
Allow only one value in jquery ui autocomplete
jQuery UI range slider with letters
jQuery UI range slider tooltips
jQuery UI Slider: Allow handles to cross over
One sided jQuery UI slider
jQuery UI range slider plugin conflicts with jQuery Mobile slider
Jquery ui slider range between times
jQuery ui range slider gives wrong value
jquery ui slider range fix to RTL
Related Tags