Slider Range between 0 and 1 with step 0.05

March 10, 2022

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

>Solution :

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>