Update demo from master

demo.css

@@ -11,3 +11,10 @@ article { margin-bottom: 10px; }
 .field-title {
   width: 100px;
 }
+
+.vertical-sliders {
+  margin: 0;
+}
+.vertical-sliders > div {
+  height: 250px;
+}

demo.js

@@ -118,6 +118,66 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Vertical sliders
+  $scope.verticalSlider1 = {
+    value: 0,
+    options: {
+      floor: 0,
+      ceil: 10,
+      vertical: true
+    }
+  };
+  $scope.verticalSlider2 = {
+    minValue: 20,
+    maxValue: 80,
+    options: {
+      floor: 0,
+      ceil: 100,
+      vertical: true
+    }
+  };
+  $scope.verticalSlider3 = {
+    value: 5,
+    options: {
+      floor: 0,
+      ceil: 10,
+      vertical: true,
+      showTicks: true
+    }
+  };
+  $scope.verticalSlider4 = {
+    minValue: 1,
+    maxValue: 5,
+    options: {
+      floor: 0,
+      ceil: 6,
+      vertical: true,
+      showTicksValues: true
+    }
+  };
+  $scope.verticalSlider5 = {
+    value: 50,
+    options: {
+      floor: 0,
+      ceil: 100,
+      vertical: true,
+      showSelectionBar: true
+    }
+  };
+  $scope.verticalSlider6 = {
+    value: 6,
+    options: {
+      floor: 0,
+      ceil: 6,
+      vertical: true,
+      showSelectionBar: true,
+      showTicksValues: true,
+      ticksValuesTooltip: function(v) {
+        return 'Tooltip for ' + v;
+      }
+    }
+  };
+
   //Read-only slider
   $scope.read_only_slider = {
     value: 50,

index.html

@@ -7,7 +7,7 @@
   <title>AngularJS Touch Slider</title>
   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css"/>
+  <link rel="stylesheet" href="../dist/rzslider.css"/>
   <link rel="stylesheet" href="demo.css"/>
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
 </head>
@@ -115,6 +115,32 @@
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Vertical sliders</h2>
+    <div class="row vertical-sliders" style="margin: 20px;">
+      <div class="col-md-2">
+        <rzslider rz-slider-model="verticalSlider1.value" rz-slider-options="verticalSlider1.options"></rzslider>
+      </div>
+      <div class="col-md-2">
+        <rzslider rz-slider-model="verticalSlider2.minValue" rz-slider-high="verticalSlider2.maxValue"
+                  rz-slider-options="verticalSlider2.options"></rzslider>
+      </div>
+      <div class="col-md-2">
+        <rzslider rz-slider-model="verticalSlider3.value" rz-slider-options="verticalSlider3.options"></rzslider>
+      </div>
+      <div class="col-md-2">
+        <rzslider rz-slider-model="verticalSlider4.minValue" rz-slider-high="verticalSlider4.maxValue"
+                  rz-slider-options="verticalSlider4.options"></rzslider>
+      </div>
+      <div class="col-md-2">
+        <rzslider rz-slider-model="verticalSlider5.value" rz-slider-options="verticalSlider5.options"></rzslider>
+      </div>
+      <div class="col-md-2">
+        <rzslider rz-slider-model="verticalSlider6.value" rz-slider-options="verticalSlider6.options"></rzslider>
+      </div>
+    </div>
+  </article>
+
   <article>
     <h2>Disabled slider</h2>
     <label>Disabled <input type="checkbox" ng-model="disabled_slider.options.disabled"></label>
@@ -199,8 +225,8 @@
 </div>
 
 </body>
-<script src="angular.min.js"></script>
+<script src="../bower_components/angular/angular.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.min.js"></script>
+<script src="../dist/rzslider.js"></script>
 <script src="demo.js"></script>
 </html>