AngularJS-Slider 2.0.0 demo

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="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.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">
    <uib-accordion close-others="true">
      <uib-accordion-group is-open="isOpen">
        <uib-accordion-heading>
          <a ng-click="refreshSlider()">Range Slider</a>
        </uib-accordion-heading>
        <rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>
      </uib-accordion-group>
    </uib-accordion>
  </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) {

  $scope.refreshSlider = function() {
    $timeout(function() {
      $scope.$broadcast('rzSliderForceRender');
    });
  };

  //Range slider config
  $scope.minRangeSlider = {
    minValue: 10,
    maxValue: 90,
    options: {
      floor: 0,
      ceil: 100,
      step: 1
    }
  };
});