Merge pull request #185 from rzajac/vertical-slider

Feature - Add a vertical option to display vertical sliders.

README.md

@@ -16,6 +16,14 @@ Slider directive implementation for AngularJS, without any dependencies.
 - Simple to use
 - Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
 
+**Horizontal**
+
+![image](https://cloud.githubusercontent.com/assets/2678610/11419158/d51cee88-9425-11e5-9d3f-3f7d97a31c6f.png)
+
+**Vertical**
+
+![image](https://cloud.githubusercontent.com/assets/2678610/11419099/7f4c0e76-9425-11e5-98c6-615412291df1.png)
+
 ## Examples
 
 - **Various examples:** [http://rzajac.github.io/angularjs-slider/](http://rzajac.github.io/angularjs-slider/index.html)
@@ -138,6 +146,7 @@ The default options are:
     interval: 350,
     showTicks: false,
     showTicksValues: false,
+    vertical: false,
     scale: 1,
     onStart: null,
     onChange: null,
@@ -204,6 +213,9 @@ $scope.slider = {
 
 **onEnd** - _Function(sliderId)_: Function to be called when a slider update is ended. If an id was set in the options, then it's passed to this callback.
 
+**vertical** - _Boolean (defaults to false)_: Set to true to display the slider vertically. The slider will take the full height of its parent.
+_Changing this value at runtime is not currently supported._
+
 ## Change default options
 If you want the change the default options for all the sliders displayed in your application, you can set them using the `RzSliderOptions.options()` method:
 ```js

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,7 +33,7 @@
       rz-slider-model="minRangeSlider.minValue"
       rz-slider-high="minRangeSlider.maxValue"
       rz-slider-options="minRangeSlider.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -41,7 +41,7 @@
     <rzslider
       rz-slider-model="slider_visible_bar.value"
       rz-slider-options="slider_visible_bar.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -49,7 +49,7 @@
     <rzslider
       rz-slider-model="slider_floor_ceil.value"
       rz-slider-options="slider_floor_ceil.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -61,7 +61,7 @@
     <rzslider
       rz-slider-model="slider_callbacks.value"
       rz-slider-options="slider_callbacks.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -70,7 +70,7 @@
       rz-slider-model="slider_translate.minValue"
       rz-slider-high="slider_translate.maxValue"
       rz-slider-options="slider_translate.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -78,7 +78,7 @@
     <rzslider
       rz-slider-model="slider_alphabet.value"
       rz-slider-options="slider_alphabet.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -86,7 +86,7 @@
     <rzslider
       rz-slider-model="slider_ticks.value"
       rz-slider-options="slider_ticks.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -94,7 +94,7 @@
     <rzslider
       rz-slider-model="slider_ticks_values.value"
       rz-slider-options="slider_ticks_values.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -103,7 +103,7 @@
       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 @@
       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 @@
     <rzslider
       rz-slider-model="disabled_slider.value"
       rz-slider-options="disabled_slider.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -130,7 +156,7 @@
     <rzslider
       rz-slider-model="read_only_slider.value"
       rz-slider-options="read_only_slider.options"
-      ></rzslider>
+    ></rzslider>
   </article>
 
   <article>
@@ -194,7 +220,7 @@
       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: auto;
+  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%);
 }
\ No newline at end of file

dist/rzslider.min.css

-/*! angularjs-slider - v2.0.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-11-23 */
-rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}
\ No newline at end of file
+/*! angularjs-slider - v2.0.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2015-11-26 */
+rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}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:auto;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%)}
\ No newline at end of file

src/rzslider.less

@@ -9,10 +9,9 @@
 @import 'variables.less';
 
 rzslider {
-
   display: inline-block;
   position: relative;
-  height: @barHeight;
+  height: @barDimension;
   width: 100%;
   margin: 35px 0 15px 0;
   vertical-align: middle;
@@ -57,15 +56,15 @@ rzslider {
   .rz-bar {
     left: 0;
     width: 100%;
-    height: @barHeight;
+    height: @barDimension;
     z-index: 1;
     background: @barNormalColor;
-    .rounded(@barHeight/2);
+    .rounded(@barDimension/2);
 
     &.rz-selection {
       z-index: 2;
       background: @barFillColor;
-      .rounded(@barHeight/2);
+      .rounded(@barDimension/2);
     }
   }
 
@@ -73,7 +72,7 @@ rzslider {
     cursor: pointer;
     width: @handleSize;
     height: @handleSize;
-    top: -@handleSize/2 + @barHeight/2;
+    top: -@handleSize/2 + @barDimension/2;
     background-color: @handleBgColor;
     z-index: 3;
     .rounded(@handleSize/2);
@@ -118,7 +117,7 @@ rzslider {
     width: 100%;
     position: absolute;
     left: 0;
-    top: -(@ticksHeight - @barHeight) / 2;
+    top: -(@ticksHeight - @barDimension) / 2;
     margin: 0;
     padding: 0 (@handleSize - @ticksWidth) / 2;
     z-index: 1;
@@ -147,4 +146,72 @@ rzslider {
       }
     }
   }
+
+  &.vertical {
+    position: relative;
+    width: @barDimension;
+    height: 100%;
+    margin: 0 20px;
+    padding: 0;
+    vertical-align: baseline;
+
+    .rz-base {
+      width: 100%;
+      height: 100%;
+      padding: 0;
+    }
+
+    .rz-bar-wrapper {
+      top: auto;
+      left: 0;
+      margin: 0 0 0 -@handleSize / 2;
+      padding: 0 0 0 @handleSize / 2;
+      height: 100%;
+      width: @handleSize;
+    }
+
+    .rz-bar {
+      bottom: 0;
+      left: auto;
+      width: @barDimension;
+      height: 100%;
+    }
+
+    .rz-pointer {
+      left: -@handleSize/2 + @barDimension/2 !important;
+      top: auto;
+      bottom: 0;
+    }
+
+    .rz-bubble {
+      left: @handleSize/2 !important;
+      margin-left: 3px;
+      bottom: 0;
+      &.rz-selection {
+        left: @handleSize/2 !important;
+        top: auto;
+      }
+    }
+
+    .rz-ticks {
+      height: 100%;
+      width: auto;
+      left: -(@ticksHeight - @barDimension) / 2;
+      top: 0;
+      padding: (@handleSize - @ticksWidth) / 2 0;
+      z-index: 1;
+      -webkit-flex-direction: column-reverse;
+      -ms-flex-direction: column-reverse;
+      flex-direction: column-reverse;
+
+      .tick {
+        vertical-align: middle;
+        .tick-value {
+          right: @ticksValuePosition;
+          top: auto;
+          transform: translate(0, -28%);
+        }
+      }
+    }
+  }
 }

src/variables.less

@@ -25,4 +25,4 @@
 @handleSize: 32px;
 @handlePointerSize: 8px;
 @bubblePadding: 1px 3px;
-@barHeight: 4px;
\ No newline at end of file
+@barDimension: 4px;