JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<div id="slider"></div>
<div id="rangevalue"></div>

CSS

body { padding: 20px; }
#rangevalue { margin-top: 20px; }

JavaScript

$("#slider").slider({
    range: true,
    min: 0,
    max: 500,
    values: [75, 300],
    slide: function(event, ui) {
        var minMet = ((ui.values[1] - ui.values[0]) >= 50);
        minMet && $("#rangevalue").text(ui.values[0] + ' - ' + ui.values[1]);
        return minMet;
    }
});

$("#rangevalue").text($("#slider").slider("values", 0) + ' - ' + $("#slider").slider("values", 1));