AngularJS-Slider 2.0.0 demo

by Nalin Sajwan

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="//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/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="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>
            
            {{minRangeSlider.minValue}} - {{minRangeSlider.maxValue}}
        </article>
        <article>
          <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue"
          rz-slider-options="slider.options"></rzslider>
          {{slider.minValue}} - {{slider.maxValue}}
         </article>
    </div>
</div>

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', ['rzModule', 'ui.bootstrap']);

app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
    //Minimal slider config
    $scope.minSlider = {
        minValue: 10,
        maxValue: 90,
        options: {
            floor: 0,
            ceil: 20,
            step: 0.1
        }
    };

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

    //Range slider config
    $scope.minRangeSlider = {
        minValue: 0,
        maxValue: 10,
        options: {
            floor: 0,
            ceil: 15,
            //showTicks: true,
            showTicksValues: true,
            step: 0.5,
            precesion: 1,
            minRange: 2
        }
    };
    $scope.slider = {
  minValue: 0,
  maxValue: 10,
  options: {
    floor: 0,
    ceil: 15,
    step: 0.1,
    precision: 1,
    minRange: 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 () {
               ...