refactor(stepsArray): Bind rzSliderModel and rzSliderHigh to the actual value (#335)

* refactor(stepsArray): Bind rzSliderModel and rzSliderHigh to the actual value

As discussed in #328

Author: ValentinH

CHANGELOG.md

@@ -1,3 +1,28 @@
+# 4.0.0 (2016-06-04)
+## Improvement
+- `stepsArray`: Bind rzSliderModel and rzSliderHigh to the actual value (#335).
+
+## Breaking changes
+- From now on, when using the `stepsArray` feature, you should directly provide the actual value to rzSliderModel and rzSliderHigh instead of passing the index of this value.
+Thus, you need to update your config like in the following example:
+```js
+/* before 4.0 version */
+vm.slider = {
+    value: 4, // index of the 'E' value in the array
+    options: {
+        stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+    }
+}
+
+/* from 4.0 version */
+vm.slider = {
+    value: 'E',
+    options: {
+        stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
+    }
+}
+```
+
 # 3.0.0 (2016-06-02)
 ## Features
 - Add IE8 support (#314).

README.md

@@ -275,7 +275,7 @@ $scope.slider = {
 **id** - _Any (defaults to null)_: If you want to use the same `translate` function for several sliders, just set the `id` to anything you want, and it will be passed to the `translate(value, sliderId)` function as a second argument.
 
 **stepsArray** - _Array_: If you want to display a slider with non linear/number steps.
-Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` value will be the index of the selected item in the stepsArray.
+Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` and `rz-slider-high` values will be the value of the selected item in the stepsArray.
 
 `stepsArray` can also be an array of objects like:
 

demo/demo.js

@@ -197,7 +197,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
 
   //Slider config with steps array of letters
   $scope.slider_alphabet = {
-    value: 0,
+    value: 'E',
     options: {
       stepsArray: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
     }
@@ -274,8 +274,6 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
   $scope.slider_ticks_legend = {
     value: 5,
     options: {
-      ceil: 10,
-      floor: 0,
       showTicksValues: true,
       stepsArray: [
         {value: 1, legend: 'Very poor'},

demo/index.html

@@ -30,9 +30,9 @@ <h2>Range slider</h2>
     Min Value: <input type="number" ng-model="rangeSlider.minValue"/><br/>
     Max Value: <input type="number" ng-model="rangeSlider.maxValue"/><br/>
     <rzslider
-      rz-slider-model="rangeSlider.minValue"
-      rz-slider-high="rangeSlider.maxValue"
-      rz-slider-options="rangeSlider.options"
+      data-rz-slider-model="rangeSlider.minValue"
+      data-rz-slider-high="rangeSlider.maxValue"
+      data-rz-slider-options="rangeSlider.options"
     ></rzslider>
   </article>
 
@@ -150,6 +150,7 @@ <h2>Slider with custom display function using html formatting</h2>
 
   <article>
     <h2>Slider with Alphabet</h2>
+    Current letter: {{ slider_alphabet.value }}
     <rzslider
       rz-slider-model="slider_alphabet.value"
       rz-slider-options="slider_alphabet.options"

dist/rzslider.css

@@ -1,7 +1,7 @@
-/*! angularjs-slider - v3.0.0 - 
+/*! angularjs-slider - v2.14.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/angular-slider/angularjs-slider - 
- 2016-06-02 */
+ 2016-05-25 */
 .rzslider {
   position: relative;
   display: inline-block;