JSFiddle - React, Tailwind, and code Playground

by bartek

HTML

<script src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<div ng-app="app">
    <div ng-controller="homeCtrl">
        <div class="progress" progressbar max="3" min="0" total="myTotal" current="current">
            <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="3"> <span class="ui-slider-handle"></span>
            </div>
        </div>
    </div>
    <div ng-repeat="tab in tabs" ng-bind="tab"></div>
</div>

CSS

.ui-slider-handle {

    margin-left: -9px;

    position: absolute;

    z-index: 2;

    width: 20px;

    height: 20px;

    cursor: pointer;

    background-color: pink;

    border-radius: 50%;

}

JavaScript

var app = angular.module("app", []);
app.controller('homeCtrl', function ($scope) {
    $scope.items = [{
        active: false
    }, {
        active: true
    }, {
        active: false
    }];

    $scope.myTotal = $scope.items.length;
    $scope.myCurrent = function (index) {
        for (var i = 0; i < $scope.items.length; ++i) {
            if ($scope.items[i].active) return i + 1;
        }
    };
    $scope.current = $scope.myCurrent();
});
app.directive("progressbar", function ($timeout) {
    return {
        restrict: "A",
        scope: {
            total: "=",
            current: "="
        },
        link: function (scope, element, attrs) {
            var width, offset;
            var progress = element.find("div")
            var bar = element.find("span");
            var mouseDown = false;
            element.on('mouseup', function (event) {
                mouseDown = false;
            });
            element.on('mousedown', function (event) {
                mouseDown = true;
                if (!width) {
                    width = element.prop('offsetWidth');
                }
                if (!offset) {
                    offset = progress.prop('offsetLeft');
                }
            });
            element.on('mousemove', function (event) {
                $timeout(function () {
                    if (!mouseDown) {
                        return;
                    }
                    var diff = event.pageX - offset;

                    if (diff < 0) {
                        scope.sliderValue = attrs.min;
                        element.css("left", "0%");
                        progress.css("width", "0%");
                    } else if (diff > width) {
                        scope.sliderValue = attrs.max;
                        element.css("left", "100%");
                        progress.css("width", "100%");
                    } else {
                        var percent = diff / width;

                       ...