Feature - Add a vertical option to display vertical sliders.

Author: Valentin Hervieu

demo/demo.css

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

demo/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,

demo/index.html

@@ -33,23 +33,23 @@ <h2>Range slider</h2>
       rz-slider-model="minRangeSlider.minValue"
       rz-slider-high="minRangeSlider.maxValue"
       rz-slider-options="minRangeSlider.options"
-      ></rzslider>
+    ></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>
+    ></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>
+    ></rzslider>
   </article>
 
   <article>
@@ -61,7 +61,7 @@ <h2>Slider with callbacks on start, change and end</h2>
     <rzslider
       rz-slider-model="slider_callbacks.value"
       rz-slider-options="slider_callbacks.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -70,31 +70,31 @@ <h2>Slider with custom display function</h2>
       rz-slider-model="slider_translate.minValue"
       rz-slider-high="slider_translate.maxValue"
       rz-slider-options="slider_translate.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
     <h2>Slider with Alphabet</h2>
     <rzslider
       rz-slider-model="slider_alphabet.value"
       rz-slider-options="slider_alphabet.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
     <h2>Slider with ticks</h2>
     <rzslider
       rz-slider-model="slider_ticks.value"
       rz-slider-options="slider_ticks.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
     <h2>Slider with ticks and values (and tooltips)</h2>
     <rzslider
       rz-slider-model="slider_ticks_values.value"
       rz-slider-options="slider_ticks_values.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -103,7 +103,7 @@ <h2>Range slider with ticks and values</h2>
       rz-slider-model="range_slider_ticks_values.minValue"
       rz-slider-high="range_slider_ticks_values.maxValue"
       rz-slider-options="range_slider_ticks_values.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -112,7 +112,33 @@ <h2>Slider with draggable range</h2>
       rz-slider-model="slider_draggable_range.minValue"
       rz-slider-high="slider_draggable_range.maxValue"
       rz-slider-options="slider_draggable_range.options"
-      ></rzslider>
+    ></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>
@@ -121,7 +147,7 @@ <h2>Disabled slider</h2>
     <rzslider
       rz-slider-model="disabled_slider.value"
       rz-slider-options="disabled_slider.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -130,7 +156,7 @@ <h2>Read-only slider</h2>
     <rzslider
       rz-slider-model="read_only_slider.value"
       rz-slider-options="read_only_slider.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -194,7 +220,7 @@ <h2>Slider with all options demo</h2>
       rz-slider-model="slider_all_options.minValue"
       rz-slider-high="slider_all_options.maxValue"
       rz-slider-options="slider_all_options.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 </div>
 

dist/rzslider.css

@@ -161,4 +161,74 @@ rzslider .rz-ticks .tick .tick-value {
   position: absolute;
   top: -30px;
   transform: translate(-50%, 0);
+}
+
+rzslider.vertical {
+  position: relative;
+  width: 4px;
+  height: 100%;
+  padding: 0;
+  margin: 0 20px;
+  vertical-align: baseline;
+}
+
+rzslider.vertical .rz-base {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+}
+
+rzslider.vertical .rz-bar-wrapper {
+  top: auto;
+  left: 0;
+  width: 32px;
+  height: 100%;
+  padding: 0 0 0 16px;
+  margin: 0 0 0 -16px;
+}
+
+rzslider.vertical .rz-bar {
+  bottom: 0;
+  left: initial;
+  width: 4px;
+  height: 100%;
+}
+
+rzslider.vertical .rz-pointer {
+  top: auto;
+  bottom: 0;
+  left: -14px !important;
+}
+
+rzslider.vertical .rz-bubble {
+  bottom: 0;
+  left: 16px !important;
+  margin-left: 3px;
+}
+
+rzslider.vertical .rz-bubble.rz-selection {
+  top: auto;
+  left: 16px !important;
+}
+
+rzslider.vertical .rz-ticks {
+  top: 0;
+  left: -3px;
+  z-index: 1;
+  width: auto;
+  height: 100%;
+  padding: 11px 0;
+  -webkit-flex-direction: column-reverse;
+      -ms-flex-direction: column-reverse;
+          flex-direction: column-reverse;
+}
+
+rzslider.vertical .rz-ticks .tick {
+  vertical-align: middle;
+}
+
+rzslider.vertical .rz-ticks .tick .tick-value {
+  top: auto;
+  right: -30px;
+  transform: translate(0, -28%);
 }