JSFiddle - React, Tailwind, and code Playground

by Terry Young

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/start/jquery-ui.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div class="slide" id="slide1"></div>
<div class="slide" id="TestSlider"></div>
<div class="slide" id="TimeSlider"></div>

CSS

.slide {
    margin-top: 20px;
    margin-left: 20px;
    width: 400px;
    background: #ccc;
}
.slide-back {
    position:absolute;
    height:100%;
}

.ui-slider-horizontal .ui-slider-range {
    background-color:orange;
    height:5px;
}





.ui-slider-wrapper { position: relative; }
.ui-slider-wrapper .ui-slider-horizontal { width: 100%; }

.ui-slider-labels { position: absolute; border: 1px solid transparent; }
.ui-slider-label-ticks { border: 1px solid transparent; position: absolute; white-space: nowrap; }
.ui-slider-label-ticks span { font-size: 8pt; /*0.9em;*/ min-width: 1.2em; }

.ui-slider-wrapper.horizontal { height: 2.5em; top:2em;}
.horizontal .ui-slider-labels { left: 0; right: 0; top: -0.6em }
.horizontal .ui-slider-label-ticks { width: 1.2em; height: 1.3em; text-align: center; border-left: 1px solid #999; }
.horizontal .ui-slider-label-ticks span { position: relative; display: inline-block; margin-left: -1.0em; top: -1.6em; }

.ui-slider-wrapper.vertical { width: 4.5em; }
.vertical .ui-slider-labels { top: 1px; bottom: 0; left: 0.7em; }
.vertical .ui-slider-label-ticks { height: 1.2em; width: 0.8em; border-bottom: 1px solid #999; }
.vertical .ui-slider-label-ticks span { position: relative; display: inline-block; margin-left: 1em; top: .6em; }


/* overrides */

.ui-slider-wrapper .ui-slider-horizontal {
	/*height: 0.2em;*/
	height:16px;
	border-radius:0px;
	background: none;
	background-color: transparent;
	border-width:0px;
}

.ui-slider-wrapper .ui-slider .ui-slider-handle {
	height: 20px; /*0.8em;*/
	width:15px;
	margin-left:-2px;
	/*margin-top:-6px;*/
	margin-top:2px;
	cursor:pointer;

	border-radius:0px;

	border-width: 0px 0px 0px 4px;
}

.horizontal .ui-slider-labels {
	top:-1px;
}

/*
.ui-slider-wrapper .ui-slider .ui-slider-handle-start {
	width:15px;
	border-width: 0px 0px 0px 4px;
}

.ui-slider-wrapper .ui-slider .ui-slider-handle-end {
	width:13px;
	border-width: 0px 4px 0px 0px;
	margin-left: 2px;

	background-image:...

JavaScript

(function ($, undefined) {
	$.widget("ui.labeledslider", $.ui.slider, {
		version: "@VERSION",
		options: $.extend({}, $.ui.slider.prototype.options, {

			// dragslider options
			rangeDrag: true,

			// labeledslider options
			tickInterval: 0,
			tickLabels: null,


			// customized options
			rangeShift: false,
			maxRange: 0,		// zero means no maxRange
			minRange: 0,
			rangeShiftInterval: 600,
			onEdgeReached: $.noop
		}),

		uiSlider: null,
		tickInterval: 0,

		_create: function () {
			this._detectOrientation();
			this.uiSlider =
				this.element
					.wrap('<div class="ui-slider-wrapper ui-widget"></div>')
					.before('<div class="ui-slider-labels">')
					.parent()
					.addClass(this.orientation)
					.css('font-size', this.element.css('font-size'));

			this._super();
			this.element.removeClass('ui-widget')
			this._alignWithStep();

			if (this.orientation == 'horizontal') {
				this.uiSlider
					.width(this.element.width());
			} else {
				this.uiSlider
					.height(this.element.height());
			}

			this._drawLabels();
			this._rangeCapture = false;

            this._lastChangedValue = 1; // force the 2nd handle to be the first to capture mousedown

			//console.info(this.options.max, this.options.values);
            /***
			if (this.options.range) {
				if (this.options.max == this.options.values[0] && this.options.max == this.options.values[1]) {
					this._lastChangedValue = 0;
				}
			}
            */


			var THIS = this;

			this.range
				.on('mouseenter', function () {
					if (!THIS._mouseStarted) {
						THIS.range.addClass('active');
					}
				})
				.on('mouseleave', function () {
					if (!THIS._mouseSliding) {
						THIS.range.removeClass('active');
					}
				});





			this._rangeShiftTimer = null;
			this._endReached = false;
			this._startReached = false;

		},

        _drawRange: function (event, ui) {
            //console.info('_drawRange', this, arguments);
            //return;
            
        if...