JSFiddle - React, Tailwind, and code Playground

by sathish panduga p

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<div>

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

    <div id="slider-range"></div>
    </div>

JavaScript

function showExp(minExp, maxExp) {
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 25,
        values: [5, 8],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];
            $("#amount").val("" + min + " - " + max+" Yrs");
            showExp(min, max);
        }
    }, min, max;
    $("#slider-range").slider(options);
    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);
    $("#amount").val("" + min + " - " + max + " Yrs");
    showExp(min, max);
});