JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<div ng-app="app">
    <div ng-controller="homeCtrl">
        <div slider="" class="slider" min="0" max="3" step="3"> <span></span>

        </div>
        
        <div ng-repeat="tab in tabs">{{tab}}</div
    </div>
</div>

SCSS

.slider {
    @include box-shadow(inset 0 -1px 1px rgba(255, 255, 255, 0.3));
    background: rgb(10, 10, 10) border-radius: 5px;
    height: 20px;
    padding: 10px;
    position: relative;
    > span {
        @include gradient(rgb(43, 194, 83) 37%, rgb(84, 240, 84) 69%);
        @include box-shadow(inset 0 2px 9px rgba(255, 255, 255, 0.3)\, inset 0 -2px 6px rgba(0, 0, 0, 0.4));
        background-color: rgb(43, 194, 83);
        border-radius: 20px 8px 8px 20px;
        font-weight: bold;
        display: block;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
}

JavaScript

var app = angular.module('app', []);

app.controller('homeCtrl', function ($scope) {

    $scope.tabs = [{
        name: "Tab 1",
        active: true
    }, {
        name: "Tab 2",
        active: false
    }, {
        name: "Tab 3",
        active: false
    }];

    $scope.sliderValue = 2;
});

app.directive('slider', ['$timeout', function ($timeout) {
    return {
        link: function (scope, element, attrs) {
            var $element = $(element);
            var $bar = $('span', $element);

            var step = $element.attr('step');

            // Scope/DOM elements that are not initialized out of game.
            var gs;
            var seat;
            var width;
            var offset;

            var mouseDown = false;
            element.on('mousedown touchstart', function (evt) {
                mouseDown = true;
                if (!width) {
                    width = $element.width();
                }
                if (!offset) {
                    offset = $bar.offset().left;
                }
                if (!gs) {
                    gs = scope.gs;
                }
                if (!seat) {
                    seat = scope.seat;
                }
            });

            element.on('mousemove touchmove', function (evt) {
                if (!mouseDown) {
                    return;
                }
                var diff;
                if (evt.pageX) {
                    diff = evt.pageX - offset;
                } else {
                    diff = evt.originalEvent.touches[0].pageX - offset;
                }

                if (diff < 0) {
                    scope.sliderValue = attrs.min;
                    $bar.width('0%');
                } else if (diff > width) {
                    scope.sliderValue = attrs.max;
                    $bar.width('100%');
                } else {
                    var percent = diff / width;
                    $bar.width(percent * 100 + '%');
                   ...