JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
Overlap Range : <label id="lblRange1"></label> <br/><br/>
<div id="dvSliderRange1"></div>
<br/>
No Overlap Range : <label id="lblRange2"></label> <br/><br/>
<div id="dvSliderRange2"></div>

CSS

body
{
    padding: 10px;
    font-family : Arial;
    font-size : 10pt;
}
label
{
    color : blue;
    font-weight:bold;
    font-family : Arial;
    font-size : 10pt;
}

JavaScript

$(document).ready(function() {
    $("#dvSliderRange1").slider({
        range: true,
        min: 0,
        max: 100,
        values: [20, 40],
        step: 10,
        slide: function(event, ui) {
            $("#lblRange1").text(ui.values[0] + " - " + ui.values[1]);
        }
    });

    $("#dvSliderRange2").slider({
        range: true,
        min: 0,
        max: 100,
        values: [20, 40],
        step: 10,
        slide: function(event, ui) {
            if (ui.values[0] == ui.values[1]) {
                return false;
            }
            $("#lblRange2").text(ui.values[0] + " - " + ui.values[1]);
        }
    });
});