JSFiddle - React, Tailwind, and code Playground

by petersendidit

HTML

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

<div id="slider2"></div>
<div id="rangevalue2">-</div>
<div id="rangevalueafter2">-</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 minDiff = 50;
        var index = $( ui.handle ).data( "ui-slider-handle-index" );
        var minMet = ( ui.values[1] - ui.values[0] >= minDiff);
        if ( !minMet ) {
            // If the minMet is false then force the values 
            // to be minDiff apart
            if ( index == 0 ) {
                ui.values[0] = ui.values[1] - minDiff;
            } else if ( index == 1 ) {
                ui.values[1] = ui.values[0] + minDiff;
            }
            $( this ).slider( "option", "values", ui.values );
        }
        $("#rangevalue").text( ui.values[1] - ui.values[0] );
        return minMet;
    },
    stop: function( event, ui ) {
        $("#rangevalueafter").text( ui.values[1] - ui.values[0] );
    }
});


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