JSFiddle - React, Tailwind, and code Playground

by revolunet

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/30774132/angular-example/pull2545/mobile.js"></script>
<script src="https://dl.dropboxusercontent.com/u/30774132/angular-example/pull2545/directive/ngClick.js"></script>
<script src="https://dl.dropboxusercontent.com/u/30774132/angular-example/pull2545/directive/ngDrag.js"></script>
<div ng-app="SliderTest">
    <range min="0" max="100" value="20"></range>
	<range min="0" max="200" value="100"></range>
    
    A stepped range:
    <range min="0" max="25" step="5" value="10"></range>
</div>

CSS

div.core-slider-animate > * {
	-webkit-transition:all ease-in-out 0.15s;
	-moz-transition:all ease-in-out 0.15s;
	-ms-transition:all ease-in-out 0.15s;
	-o-transition:all ease-in-out 0.15s;
	transition:all ease-in-out 0.15s;
}


div.core-range-input {
	margin: 25px 25px 25px 25px;
}


/* slider root element */
div.core-range-input > div.core-slider {
	height: 18px;
	border-width: 1px;

	background-color: transparent;
	background: 0;
	cursor: pointer;

	position: relative;
	overflow: visible;

	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	-ms-border-radius: 1em;
	-o-border-radius: 1em;
	border-radius: 1em;

	text-decoration: none;

	border: 1px solid #bbb;
	-webkit-text-shadow: 0 1px 0 #fff;
	-moz-text-shadow: 0 1px 0 #fff;
	-ms-text-shadow: 0 1px 0 #fff;
	-o-text-shadow: 0 1px 0 #fff;
	text-shadow: 0 1px 0 #fff;

	background-image: -webkit-gradient(linear,left top,left bottom,from(#d0d0d0),to(#dfdfdf));
	background-image: -webkit-linear-gradient(#d0d0d0,#dfdfdf);
	background-image: -moz-linear-gradient(#d0d0d0,#dfdfdf);
	background-image: -ms-linear-gradient(#d0d0d0,#dfdfdf);
	background-image: -o-linear-gradient(#d0d0d0,#dfdfdf);
	background-image: linear-gradient(#d0d0d0,#dfdfdf);
}

/* progress bar (enabled with progress: true) */
div.core-range-input > div.core-slider > div {
	border: 0;
	height: 100%;

	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	-ms-background-clip: padding;
	-o-background-clip: padding;
	background-clip: padding-box;

	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	-ms-border-radius: 1em;
	-o-border-radius: 1em;
	border-radius: 1em;

	margin-top: -1px;
	margin-left: -1px;
	border: 1px solid #2373a5;
	background: #5393c5;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	text-shadow: 0 1px 0 #3373a5;
	text-decoration: none;

	background-image: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
	background-image: -webkit-linear-gradient(#5393c5,#6facd5);
	background-image:...

JavaScript

(function(angular, undefined) {
    'use strict';



    angular.module('SliderTest', ['ngMobile'])
        .directive('range', [function() {
            return {
                restrict: 'E',        // Element i.e. <range min="0" max="23" />
                transclude: false,    // Contents of the tag are discarded
                replace: true,        // Remove the actual Range tag
                scope: true,
                template:     '<div class="core-range-input" ng-class="{disabled: disabled, readonly: readonly, vertical: vertical}">' +
                                '<div ng-click="clicked($event)" class="core-slider core-slider-animate">' +
                                    '<div></div>' +
                                    '<span class="handle" ng-drag role="slider" drag-start="dragStart($event)" drag-end="dragEnd($event)" on-drag="drag($event, $position)"></span>' + 
                                '</div>' +
                                '<input type="number" data-type="range" ng-class="{hide: !visible}" max="{{max}}" min="{{min}}" step="{{step}}" />' +
                            '</div>',
                compile: function(tElement, tAttrs, transclude) {
                    return function(scope, iElement, iAttrs, controller) {    // This is the linking function
                        var input = iElement.children('input'),
                            slider = iElement.children('div'),
                            progress = slider.children('div'),
                            handle = progress.next(),
                            value,            // Value at the handle level (vs the scope)
                            origo,            // handle's start point
                            len,                // length of the range in px
                            percentile,                // length of the range in px
                            dragging = false,

                            round = function (value, precision) {
             ...