JSFiddle - React, Tailwind, and code Playground

by RhinoD

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<div id="slider">
    <div style="width: 100%;">
        <div class="ui-slider-label" id="ui-slider-label-min">
            <div> <span class="value"></span>

            </div> <span class="delimiter">|</span>

        </div>
        <div class="ui-slider-label" id="ui-slider-label-max">
            <div> <span class="value"></span>

            </div> <span class="delimiter">|</span>

        </div>
    </div>
    <div class="ui-slider-handle" id="ui-slider-left_handle">
        <div class="label">
            <div><span class="value"></span>
            </div> <span class="delimiter">|</span>

        </div>
    </div>
    <div class="ui-slider-handle" id="ui-slider-right_handle">
        <div class="label">
            <div><span class="value"></span>
            </div> <span class="delimiter">|</span>

        </div>
    </div>
</div>

CSS

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 14pt;
    padding: 5em;
}
#slider {
    margin: 5em;
    position: relative;
}
.ui-slider-horizontal {
    height: .25em !important;
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .25);
}
.ui-slider-range {
    background: #6c6;
    box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, .25);
}
.ui-slider .ui-slider-handle {
    top: -.875em;
    margin-left: -1em;
    width: 2em;
    height: 2em;
    border-radius: 100%;
    -ms-touch-action: none;
    touch-action: none;
}
.ui-slider .ui-slider-handle .label {
    position: relative;
    top: -3em;
    left: 50%;
    margin-left: -1.55em;
    text-align: center;
    font-size: .75em;    
}
.ui-slider .ui-slider-handle .delimiter {
    display: inline-block;
    margin-left: -1.05em;
}
.ui-slider .ui-slider-handle .label div {
    width: 3em;    
}
#slider .ui-slider-label {
    display: inline-block;
    position: absolute;
    top: -3em;
    font-size: .6em;
    color: #aaa;
    display: none;
}
#ui-slider-left_handle {
    transform: rotate(0);
}
#ui-slider-right_handle {
    transform: rotate(0);
}
#ui-slider-label-min {
    left: -1.31em;
}
#ui-slider-label-max {
    right: -1.31em;
}

JavaScript

var min = 1966;
var max = 2015;

var leftHandle = '';
var rightHandle = '';
var leftLabel = '';
var rightLabel = '';

$(document).ready( function() {

	$('.ui-slider-handle').on('touchend', function() {
		this.trigger('click');
	});
	
});

$(document).ready(function () {

    var slider = $('#slider');

    slider
        .slider({
            animate: 'fast',
            min: min,
            max: max,
            step: 0.1,
            range: true,
            values: [1976, 2013],
            slide: function ( event, ui ) {
                change_label(ui);
            },
            render: function( event, ui ) {
                change_label(ui);
            }
        })
        .bind('render', function( event, ui ){
            change_label(ui);
        });

    leftHandle = $('#ui-slider-left_handle');
    rightHandle = $('#ui-slider-right_handle');
    leftLabel = $('#ui-slider-label-min');
    rightLabel = $('#ui-slider-label-max');

    leftHandle.find('.value').html(min);
    rightHandle.find('.value').html(max);
    leftLabel.html(min);
    rightLabel.html(max);

    //slider.on('slide', function( event, ui ) {
    //    change_label( ui );
    //});

    change_label( slider.slider( "option" ) );
    
});

function change_label(ui) {

    var handle = $(ui.handle);

    handle.find('.value').html(Math.round(ui.value));

    var offsetLeft = ui.values[0] - min;
    var offsetRight = max - ui.values[1];
    var Range = ui.values[1] - ui.values[0];

    if (offsetLeft <= 8) {
        leftLabel.fadeOut('fast');
    } else {
        if (leftLabel.is(':not(:visible)')) leftLabel.fadeIn('fast');
    }

    if (offsetRight <= 8) {
        rightLabel.fadeOut('fast');
    } else {
        if (rightLabel.is(':not(:visible)')) rightLabel.fadeIn('fast');
    }

    if (Range <= 11) {
        var angle = (11 - Range) * 4.091;
        leftHandle.css('transform', 'rotate(-' + angle / 2 + 'deg)');
        rightHandle.css('transform', 'rotate(' + angle / 2 + 'deg)');
...