JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<div id="slider-range"></div>
<input type="text" id="minvalue" name="minvalue" /><br>
<input type="text" id="maxvalue" name="maxvalue" /><br>
<input type="text" id="amount" name="amount" /><br>

CSS

#slider-range {
    width:400px;    
}

JavaScript

$(function() {

    $("#slider-range").slider({
        range: true,
        min: 1,
        max: 10,
        values: [0, 11],
        slide: function(event, ui) {
            $("#minvalue").val(ui.values[0]);
            $("#maxvalue").val(ui.values[1]);
            $("#amount").val(ui.values[0] + " - " + ui.values[1]);
        },
        create: function(event, ui) {
            $("#minvalue").val(1);
            $("#maxvalue").val(10);
        }
    });
    $("#amount").val($("#slider-range").slider("values", 0) + " - " + $("#slider-range").slider("values", 1));

});