I am trying to create a slider range function having minimum and maximum value between 0 and 1 with step 0.05. Default value, is set to be at 0.65 and 0.85. But with 0 and 1, its not working properly. Between 0 and 100 its working
Working Code with range between 0 and 100
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 100,
values: [65,85],
slide: function (event, ui) {
$("#min-val").val(ui.values[0]);
$("#max-val").val(ui.values[1]);
}
});
$("#min-val").val(($("#slider-range").slider("values", 0)));
$("#max-val").val(($("#slider-range").slider("values", 1)));
Code for between 0 and 1(not working)
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 1,
values: [0.65, 0.75],
slide: function (event, ui) {
$("#min-val").val(ui.values[0]);
$("#max-val").val(ui.values[1]);
}
});
$("#min-val").val(($("#slider-range").slider("values", 0)));
$("#max-val").val(($("#slider-range").slider("values", 1)));
Thanks in advance
You did not use the step property. Once added it works fine:
$(function () {
$("#slider-range").slider({
range: true,
min: 0,
max: 1,
values: [.65,.85],
step: .05,
slide: function (event, ui) {
$("#min-val").val(ui.values[0]);
$("#max-val").val(ui.values[1]);
}
});
$("#min-val").val(($("#slider-range").slider("values", 0)));
$("#max-val").val(($("#slider-range").slider("values", 1)));
});<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="slider-range"></div>