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.25em;
}
.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;
}

#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;

function change_label( ui ) {
    
    var handle = $(ui.handle);
    
    var leftHandle = $('#ui-slider-left_handle');
    var rightHandle = $('#ui-slider-right_handle');
    
    handle.find('.value').html(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 ) {
        $('#ui-slider-label-min').fadeOut('fast');
    } else {
        $('#ui-slider-label-min').fadeIn('fast');
    }
    
    if( offsetRight <= 8 ) {
        $('#ui-slider-label-max').fadeOut('fast');
    } else {
        $('#ui-slider-label-max').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)');
    }
    
} 

$(document).ready(function() {
    
    $("#slider").slider({
        animate: 'fast',
        min: min,
        max: max,
        step: 1,
        range: true,
        values: [min, max]
    });
    
    $('#ui-slider-right_handle').find('.value').html(min);
    $('#ui-slider-left_handle').find('.value').html(max);
    $('#ui-slider-label-min').html(min);
    $('#ui-slider-label-max').html(max);
    
    $('#slider').on('slide', function( event, ui ) {
        change_label( ui );
    });
    
});