Merge pull request #276 from Liam-Ryan/pr/rtl

feat(RzSlider): Add RTL support

Author: ValentinH

.gitignore

@@ -3,3 +3,4 @@ node_modules/
 bower_components/
 temp/
 tests/coverage/
+dist/

CHANGELOG.md

@@ -1,3 +1,7 @@
+2.10.0 (2016-02-28)
+## Features
+- Added rightToLeft option for RTL support (#270)
+
 # 2.9.0 (2016-02-18)
 ## Features
 - Change `rzSliderOptions` to use expression binding (#266).

README.md

@@ -20,6 +20,7 @@ Slider directive implementation for AngularJS, without any dependencies: [http:/
 - Simple to use
 - Keyboard support
 - Compatibility with jQuery Lite, ie. with full jQuery ( Thanks Jusas! https://github.com/Jusas)
+- Supports right to left
 
 **Horizontal**
 
@@ -202,7 +203,8 @@ The default options are:
     onlyBindHandles: false,
     onStart: null,
     onChange: null,
-    onEnd: null
+    onEnd: null,
+    rightToLeft: false
 }
 ````
 
@@ -295,6 +297,8 @@ $scope.slider = {
 
 **onEnd** - _Function(sliderId, modelValue, highValue)_: 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.
 
+**rightToLeft** - _Boolean (defaults to false)_: Set to true to show graphs right to left. If **vertical** is true it reverses the left / right arrow functions
+
 **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._
 

demo/demo.js

@@ -112,6 +112,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
     }
   };
 
+  //Right to left slider with floor, ceil and step
+  $scope.slider_floor_ceil_rtl = {
+    value: 12,
+    options: {
+    floor: 10,
+    ceil: 100,
+    step: 5,
+    rightToLeft: true
+    }
+  }
+
   //Slider config with callbacks
   $scope.slider_callbacks = {
     value: 100,

demo/index.html

@@ -102,6 +102,14 @@ <h2>Slider with custom floor/ceil/step</h2>
     ></rzslider>
   </article>
 
+  <article>
+    <h2>Right to left slider with custom floor/ceil/step</h2>
+    <rzslider
+      rz-slider-model="slider_floor_ceil_rtl.value"
+      rz-slider-options="slider_floor_ceil_rtl.options"
+    ></rzslider>
+  </article>
+
   <article>
     <h2>Slider with callbacks on start, change and end</h2>
     <p>Value linked on start: {{ otherData.start }}</p>
@@ -289,7 +297,8 @@ <h2>Slider with all options demo</h2>
         <label>Show ticks <input type="checkbox" ng-model="slider_all_options.options.showTicks"></label><br/>
         <label>Show ticks values <input type="checkbox" ng-model="slider_all_options.options.showTicksValues"></label><br/>
         <label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
-        <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label>
+        <label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br />
+        <label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label>
       </div>
     </div>
     <rzslider

dist/rzslider.css

@@ -1,7 +1,7 @@
 /*! angularjs-slider - v2.9.0 - 
  (c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> - 
  https://github.com/angular-slider/angularjs-slider - 
- 2016-02-24 */
+ 2016-02-28 */
 rzslider {
   position: relative;
   display: inline-block;