JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<p>
    <label for="amount">Max:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-min"></div>

JavaScript

$("#slider-range-min").slider({
        range: "min",
        value: 500,
        min: 0,
        step: 10,
        max: 1000,
        slide: function (event, ui) {
            $("#amount").val("$" + ui.value);
            if (ui.value == 0) {
                $("#slider-range-min").slider('value', 1);
                $("#amount").val('$1');
            }
        },
        stop: function (event, ui) {
            if (ui.value == 0) {
                $("#slider-range-min").slider('value', 1);
                $("#amount").val('$1');
            }
        }
    });
    $("#amount").val("$" + $("#slider-range-min").slider("value"));