AngularJS-Slider 2.0.0 demo

by ValentinH

HTML

<link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="rzSliderDemo">
    <div ng-controller="MainCtrl" class="wrapper">
        <header>
             <h1>AngularJS Touch Slider</h1>

        </header>
        <article>
             <h2>Simple slider</h2>
Model:
            <input type="number" ng-model="minSlider.value" />
            <br/>
            <rzslider rz-slider-model="minSlider.value"></rzslider>
        </article>
        <article>
             <h2>Range slider</h2>
Min Value:
            <input type="number" ng-model="minRangeSlider.minValue" />
            <br/>Max Value:
            <input type="number" ng-model="minRangeSlider.maxValue" />
            <br/>
            <rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>
        </article>
        <article>
             <h2>Slider with visible selection bar</h2>

            <rzslider rz-slider-model="slider_visible_bar.value" rz-slider-options="slider_visible_bar.options"></rzslider>
        </article>
        
      <article>
        <h2>Slider with dynamic selection bar colors</h2>
        <rzslider
          rz-slider-model="color_slider_bar.value"
          rz-slider-options="color_slider_bar.options"
        ></rzslider>
      </article>
  
        <article>
             <h2>Slider with custom floor/ceil/step</h2>

            <rzslider rz-slider-model="slider_floor_ceil.value" rz-slider-options="slider_floor_ceil.options"></rzslider>
       ...

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family:'Open Sans', sans-serif;
    color: #1f2636;
    font-size: 14px;
    padding-bottom: 40px;
}
header {
    background: #0db9f0;
    color: #fff;
    margin: -40px;
    margin-bottom: 40px;
    text-align: center;
    padding: 40px 0;
}
h1 {
    font-weight: 300;
}
h2 {
    margin-bottom:10px;
}
.wrapper {
    background: #fff;
    padding: 40px;
}
article {
    margin-bottom: 10px;
}
.tab-pane {
    padding-top: 10px;
}
.field-title {
    width: 100px;
}
.vertical-sliders {
    margin: 0;
}
.vertical-sliders > div {
    height: 250px;
}

JavaScript

var app = angular.module('rzSliderDemo', ['rzSlider', 'ui.bootstrap']);

app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
    //Minimal slider config
    $scope.minSlider = {
        value: 10
    };

    //Slider with selection bar
    $scope.slider_visible_bar = {
        value: 10,
        options: {
            showSelectionBar: true
        }
    };

    //Range slider config
    $scope.minRangeSlider = {
        minValue: 10,
        maxValue: 90,
        options: {
            floor: 0,
            ceil: 100,
            step: 1
        }
    };
    
    //Slider with selection bar
    $scope.color_slider_bar = {
      value: 12,
      options: {
        showSelectionBar: true,
        getSelectionBarColor: function(value) {
          if (value <= 3)
            return 'red';
          if (value <= 6)
            return 'orange';
          if (value <= 9)
            return 'yellow';
          return '#2AE02A';
        }
      }
    };

    //Slider config with floor, ceil and step
    $scope.slider_floor_ceil = {
        value: 12,
        options: {
            floor: 10,
            ceil: 100,
            step: 5
        }
    };

    //Slider config with callbacks
    $scope.slider_callbacks = {
        value: 100,
        options: {
            onStart: function () {
                $scope.otherData.start = $scope.slider_callbacks.value * 10;
            },
            onChange: function () {
                $scope.otherData.change = $scope.slider_callbacks.value * 10;
            },
            onEnd: function () {
                $scope.otherData.end = $scope.slider_callbacks.value * 10;
            }
        }
    };
    $scope.otherData = {
        start: 0,
        change: 0,
        end: 0
    };

    //Slider config with custom display function
    $scope.slider_translate = {
        minValue: 100,
        maxValue: 400,
        options: {
            ceil: 500,
            floor: 0,
            translate: function...