AngularJS-Slider 2.0.0 demo 3

by Rishabh Sharma

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 ng-repeat="element in attributes" is-open="element.isOpen">
        <uib-accordion-heading>
          <a>{{element.name}}</a>
        </uib-accordion-heading>

        <div ng-if="element.type === 'control'">
          <form ng-submit="submit(); refreshSlider()">
            <p>
              <input class="btn btn-default" type="submit" value="Generate Random Range" />
            </p>
          </form>
        </div>

        <div ng-if="element.type === 'slider'">
          <rzslider rz-slider-model="element.min" rz-slider-high="element.max" rz-slider-options="element.options"></rzslider>
        </div>


      </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, $interval) {

  $scope.attributes = [{
    name: 'Filter 1',
    isOpen: true,
    type: 'control'
  }, {
    name: 'Filter 2',
    isOpen: false,
    type: 'slider',
    min: 0,
    max: 100,
    options: {
      floor: 0,
      ceil: 100
    }
  }];

  $scope.submit = function() {
    $scope.attributes[1].options.ceil = $scope.attributes[1].min = Math.floor(Math.random() * 200) + 100;
    $scope.attributes[1].options.floor = $scope.attributes[1].max = Math.floor(Math.random() * 10) + 1;
  }
});