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

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
4cb01328 · Valentin Hervieu · f81bb673 · 4cb01328 · 4cb01328 · 4cb01328
Commit 4cb01328 authored Jun 04, 2016 by Valentin Hervieu
19 changed files
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
+# 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).

--- a/README.md
+++ b/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:

--- a/demo/demo.js
+++ b/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'},

--- a/demo/index.html
+++ b/demo/index.html
@@ -30,9 +30,9 @@
    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"
+      data-rz-slider-model="rangeSlider.minValue"
-      rz-slider-high="rangeSlider.maxValue"
+      data-rz-slider-high="rangeSlider.maxValue"
-      rz-slider-options="rangeSlider.options"
+      data-rz-slider-options="rangeSlider.options"
    ></rzslider>
  </article>
@@ -150,6 +150,7 @@
  <article>
    <h2>Slider with Alphabet</h2>
+    Current letter: {{ slider_alphabet.value }}
    <rzslider
      rz-slider-model="slider_alphabet.value"
      rz-slider-options="slider_alphabet.options"

--- a/dist/rzslider.css
+++ b/dist/rzslider.css
-/*! 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;

--- a/dist/rzslider.js
+++ b/dist/rzslider.js
--- a/dist/rzslider.min.css
+++ b/dist/rzslider.min.css
-/*! angularjs-slider - v3.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/angular-slider/angularjs-slider -  2016-06-02 */
+/*! 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-05-25 */
 .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.with-legend{margin-bottom:40px}.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{z-index:4}.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%;height:0;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 .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}.rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}.rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}.rzslider .rz-ticks .rz-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-40px}.rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}.rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}.rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}.rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}.rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}.rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}.rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}.rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:22px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:12px;bottom:initial;left:initial}
\ No newline at end of file
--- a/dist/rzslider.min.js
+++ b/dist/rzslider.min.js
--- a/src/rzslider.js
+++ b/src/rzslider.js
--- a/tests/specs/accessibility-test.js
+++ b/tests/specs/accessibility-test.js
@@ -203,7 +203,7 @@
    it('should have accessible slider when values are text', function() {
      var sliderConf = {
-        value: 1,
+        value: 'B',
        options: {
          stepsArray: ['A', 'B', 'C']
        }
@@ -211,14 +211,14 @@
      helper.createSlider(sliderConf);
      expect(helper.slider.minH.attr('role')).to.equal('slider');
      expect(helper.slider.minH.attr('tabindex')).to.equal('0');
-      expect(helper.slider.minH.attr('aria-valuenow')).to.equal('1');
+      expect(helper.slider.minH.attr('aria-valuenow')).to.equal('B');
      expect(helper.slider.minH.attr('aria-valuetext')).to.equal('B');
      expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0');
      expect(helper.slider.minH.attr('aria-valuemax')).to.equal('2');
-      helper.scope.slider.value = 2;
+      helper.scope.slider.value = 'C';
      helper.scope.$digest();
-      expect(helper.slider.minH.attr('aria-valuenow')).to.equal('2');
+      expect(helper.slider.minH.attr('aria-valuenow')).to.equal('C');
      expect(helper.slider.minH.attr('aria-valuetext')).to.equal('C');
    });
  });

--- a/tests/specs/mouse-controls/draggable-range-slider-horizontal-test.js
+++ b/tests/specs/mouse-controls/draggable-range-slider-horizontal-test.js
@@ -93,7 +93,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -112,7 +112,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -133,7 +133,7 @@
      expect(helper.scope.slider.min).to.equal(50);
      expect(helper.scope.slider.max).to.equal(70);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingBar.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -149,7 +149,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(50);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() {
@@ -161,7 +161,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(60);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and move move range when near max and moved right', function() {
@@ -173,7 +173,7 @@
      expect(helper.scope.slider.min).to.equal(50);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and don\'t move range when already at max and moved right', function() {
@@ -185,7 +185,7 @@
      expect(helper.scope.slider.min).to.equal(40);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should a working positionTrackingBar', function() {
@@ -295,7 +295,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -314,7 +314,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -335,7 +335,7 @@
      expect(helper.scope.slider.min).to.equal(30);
      expect(helper.scope.slider.max).to.equal(50);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingBar.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -351,7 +351,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(50);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
    });
    it('should handle click on selbar and don\'t move range when already at 0 and moved right', function() {
@@ -363,7 +363,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(60);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
    });
    it('should handle click on selbar and move range when near max and moved left', function() {
@@ -375,7 +375,7 @@
      expect(helper.scope.slider.min).to.equal(50);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
    });
    it('should handle click on selbar and don\'t move range when already at max and moved left', function() {
@@ -387,7 +387,7 @@
      expect(helper.scope.slider.min).to.equal(40);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
    });
    it('should a working positionTrackingBar', function() {

--- a/tests/specs/mouse-controls/draggableOnly-range-slider-horizontal-test.js
+++ b/tests/specs/mouse-controls/draggableOnly-range-slider-horizontal-test.js
@@ -93,7 +93,7 @@
      expect(helper.scope.slider.min).to.equal(50);
      expect(helper.scope.slider.max).to.equal(70);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingBar.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -109,7 +109,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(50);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() {
@@ -121,7 +121,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(60);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and move range when near max and moved right', function() {
@@ -133,7 +133,7 @@
      expect(helper.scope.slider.min).to.equal(50);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and don\'t move range when already at max and moved right', function() {
@@ -145,7 +145,7 @@
      expect(helper.scope.slider.min).to.equal(40);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and move range when floor is not 0 and handle is dragged below limit', function() {
@@ -160,7 +160,7 @@
      expect(helper.scope.slider.min).to.equal(1000);
      expect(helper.scope.slider.max).to.equal(1500);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
  });
@@ -257,7 +257,7 @@
      expect(helper.scope.slider.min).to.equal(50);
      expect(helper.scope.slider.max).to.equal(70);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingBar.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -273,7 +273,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(50);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and don\'t move range when already at 0 and moved left', function() {
@@ -285,7 +285,7 @@
      expect(helper.scope.slider.min).to.equal(0);
      expect(helper.scope.slider.max).to.equal(60);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and move range when near max and moved right', function() {
@@ -297,7 +297,7 @@
      expect(helper.scope.slider.min).to.equal(50);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and don\'t move range when already at max and moved right', function() {
@@ -309,7 +309,7 @@
      expect(helper.scope.slider.min).to.equal(40);
      expect(helper.scope.slider.max).to.equal(100);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
    it('should handle click on selbar and move range when floor is not 0 and handle is dragged below limit', function() {
@@ -324,7 +324,7 @@
      expect(helper.scope.slider.min).to.equal(1000);
      expect(helper.scope.slider.max).to.equal(1500);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
    });
  });
 }());

--- a/tests/specs/mouse-controls/range-slider-horizontal-test.js
+++ b/tests/specs/mouse-controls/range-slider-horizontal-test.js
@@ -48,7 +48,7 @@
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -67,7 +67,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -83,7 +83,7 @@
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -102,7 +102,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -208,7 +208,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -227,7 +227,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -246,7 +246,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -265,7 +265,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -321,7 +321,7 @@
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -340,7 +340,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -356,7 +356,7 @@
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -375,7 +375,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -481,7 +481,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -500,7 +500,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -519,7 +519,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -538,7 +538,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;

--- a/tests/specs/mouse-controls/range-slider-vertical-test.js
+++ b/tests/specs/mouse-controls/range-slider-vertical-test.js
@@ -49,7 +49,7 @@
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -68,7 +68,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -84,7 +84,7 @@
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -103,7 +103,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -171,7 +171,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -190,7 +190,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -209,7 +209,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset, true);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -228,7 +228,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset, true);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -285,7 +285,7 @@
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -304,7 +304,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -320,7 +320,7 @@
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -339,7 +339,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      expect(helper.slider.maxH.hasClass('rz-active')).to.be.true;
    });
@@ -407,7 +407,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -426,7 +426,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -445,7 +445,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset, true);
      expect(helper.scope.slider.min).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
@@ -464,7 +464,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset, true);
      expect(helper.scope.slider.max).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderHigh');
+      expect(helper.slider.tracking).to.equal('highValue');
      helper.slider.focusElement.calledWith(helper.slider.maxH).should.be.true;
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;

--- a/tests/specs/mouse-controls/single-slider-horizontal-test.js
+++ b/tests/specs/mouse-controls/single-slider-horizontal-test.js
@@ -47,7 +47,7 @@
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -66,7 +66,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -108,7 +108,7 @@
      sinon.spy(helper.slider.scope, '$emit');
      helper.fireMouseup();
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
      helper.slider.callOnEnd.called.should.be.true;
      helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
@@ -141,7 +141,7 @@
      helper.fireMousedown(helper.slider.fullBar, offset);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -158,7 +158,7 @@
      var event = helper.fireMousedown(helper.slider.selBar, offset);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -178,7 +178,7 @@
      helper.fireMousedown(helper.slider.ticks, offset);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -198,7 +198,7 @@
      helper.fireMousedown(helper.slider.ticks, offset);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -252,7 +252,7 @@
        helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
        event.preventDefault.called.should.be.true;
        event.stopPropagation.called.should.be.true;
-        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.tracking).to.equal('lowValue');
        expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
      });
@@ -271,7 +271,7 @@
        helper.slider.focusElement.called.should.be.false;
        event.preventDefault.called.should.be.true;
        event.stopPropagation.called.should.be.true;
-        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.tracking).to.equal('lowValue');
        expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
      });
@@ -312,7 +312,7 @@
        sinon.spy(helper.slider.scope, '$emit');
        helper.fireMouseup();
-        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.tracking).to.equal('lowValue');
        expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
        helper.slider.callOnEnd.called.should.be.true;
        helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
@@ -345,7 +345,7 @@
        helper.fireMousedown(helper.slider.fullBar, offset);
        expect(helper.scope.slider.value).to.equal(expectedValue);
-        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.tracking).to.equal('lowValue');
        helper.slider.positionTrackingHandle.called.should.be.true;
        helper.slider.callOnStart.called.should.be.true;
        helper.slider.callOnChange.called.should.be.true;
@@ -362,7 +362,7 @@
        var event = helper.fireMousedown(helper.slider.selBar, offset);
        expect(helper.scope.slider.value).to.equal(expectedValue);
-        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.tracking).to.equal('lowValue');
        helper.slider.positionTrackingHandle.called.should.be.true;
        helper.slider.callOnStart.called.should.be.true;
        helper.slider.callOnChange.called.should.be.true;
@@ -382,7 +382,7 @@
        helper.fireMousedown(helper.slider.ticks, offset);
        expect(helper.scope.slider.value).to.equal(expectedValue);
-        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.tracking).to.equal('lowValue');
        helper.slider.positionTrackingHandle.called.should.be.true;
        helper.slider.callOnStart.called.should.be.true;
        helper.slider.callOnChange.called.should.be.true;
@@ -402,7 +402,7 @@
        helper.fireMousedown(helper.slider.ticks, offset);
        expect(helper.scope.slider.value).to.equal(expectedValue);
-        expect(helper.slider.tracking).to.equal('rzSliderModel');
+        expect(helper.slider.tracking).to.equal('lowValue');
        helper.slider.positionTrackingHandle.called.should.be.true;
        helper.slider.callOnStart.called.should.be.true;
        helper.slider.callOnChange.called.should.be.true;

--- a/tests/specs/mouse-controls/single-slider-vertical-test.js
+++ b/tests/specs/mouse-controls/single-slider-vertical-test.js
@@ -48,7 +48,7 @@
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -67,7 +67,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -111,7 +111,7 @@
      sinon.spy(helper.slider.scope, '$emit');
      helper.fireMouseup();
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
      helper.slider.callOnEnd.called.should.be.true;
      helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
@@ -144,7 +144,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -161,7 +161,7 @@
      helper.fireMousedown(helper.slider.selBar, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -181,7 +181,7 @@
      helper.fireMousedown(helper.slider.ticks, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -201,7 +201,7 @@
      helper.fireMousedown(helper.slider.ticks, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -256,7 +256,7 @@
      helper.slider.focusElement.calledWith(helper.slider.minH).should.be.true;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -275,7 +275,7 @@
      helper.slider.focusElement.called.should.be.false;
      event.preventDefault.called.should.be.true;
      event.stopPropagation.called.should.be.true;
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
    });
@@ -319,7 +319,7 @@
      sinon.spy(helper.slider.scope, '$emit');
      helper.fireMouseup();
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      expect(helper.slider.minH.hasClass('rz-active')).to.be.true;
      helper.slider.callOnEnd.called.should.be.true;
      helper.slider.scope.$emit.calledWith('slideEnded').should.be.true;
@@ -352,7 +352,7 @@
      var event = helper.fireMousedown(helper.slider.fullBar, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -369,7 +369,7 @@
      helper.fireMousedown(helper.slider.selBar, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -389,7 +389,7 @@
      helper.fireMousedown(helper.slider.ticks, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;
@@ -409,7 +409,7 @@
      helper.fireMousedown(helper.slider.ticks, offset, true);
      expect(helper.scope.slider.value).to.equal(expectedValue);
-      expect(helper.slider.tracking).to.equal('rzSliderModel');
+      expect(helper.slider.tracking).to.equal('lowValue');
      helper.slider.positionTrackingHandle.called.should.be.true;
      helper.slider.callOnStart.called.should.be.true;
      helper.slider.callOnChange.called.should.be.true;

--- a/tests/specs/options-handling-test.js
+++ b/tests/specs/options-handling-test.js
@@ -105,29 +105,28 @@
      });
      it('should set correct step/floor/ceil and translate function when stepsArray is used with values', function() {
+        helper.scope.slider.value = 'C';
        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
        helper.scope.$digest();
        expect(helper.slider.options.step).to.equal(1);
        expect(helper.slider.options.floor).to.equal(0);
        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(2);
-        expect(helper.slider.customTrFn(0)).to.equal('A');
-        expect(helper.slider.customTrFn(2)).to.equal('C');
      });
-      it('should set correct step/floor/ceil and translate function when stepsArray is used with values and ticks', function() {
+      it('should set correct step/floor/ceil when stepsArray is used with values and ticks', function() {
+        helper.scope.slider.value = 'C';
        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
        helper.scope.slider.options.showTicks = true;
        helper.scope.$digest();
        expect(helper.slider.options.step).to.equal(1);
        expect(helper.slider.options.floor).to.equal(0);
        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(2);
-        expect(helper.slider.customTrFn(0)).to.equal('A');
-        expect(helper.slider.customTrFn(2)).to.equal('C');
      });
-      it('should set correct step/floor/ceil and translate function when stepsArray is used with objects', function() {
+      it('should set correct step/floor/ceil when stepsArray is used with objects', function() {
+        helper.scope.slider.value = 'D';
        helper.scope.slider.options.stepsArray = [
          {value: 'A'},
          {value: 'B'},
@@ -139,13 +138,11 @@
        expect(helper.slider.options.step).to.equal(1);
        expect(helper.slider.options.floor).to.equal(0);
        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(3);
-        expect(helper.slider.customTrFn(0)).to.equal('A');
-        expect(helper.slider.customTrFn(2)).to.equal('C');
      });
+      it('should set correct step/floor/ceil function when stepsArray is used with objects containing legends', function() {
-      it('should set correct step/floor/ceil and translate function when stepsArray is used with objects containing legends', function() {
+        helper.scope.slider.value = 'D';
        helper.scope.slider.options.stepsArray = [
          {value: 'A'},
          {value: 'B', legend: 'Legend B'},
@@ -159,9 +156,7 @@
        expect(helper.slider.options.step).to.equal(1);
        expect(helper.slider.options.floor).to.equal(0);
        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(3);
-        expect(helper.slider.customTrFn(0)).to.equal('A');
-        expect(helper.slider.customTrFn(2)).to.equal('C');
        expect(helper.slider.getLegend(1)).to.equal('Legend B');
        expect(helper.slider.getLegend(3)).to.equal('Legend D');
@@ -610,6 +605,49 @@
        expect(helper.scope.slider.min).to.equal(0);
        expect(helper.scope.slider.max).to.equal(100);
      });
+      it('should set correct step/floor/ceil and translate function when stepsArray is used with values', function() {
+        helper.scope.slider.min = 'B';
+        helper.scope.slider.max = 'D';
+        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(1);
+        expect(helper.slider.highValue).to.equal(3);
+      });
+      it('should set correct step/floor/ceil when stepsArray is used with values and ticks', function() {
+        helper.scope.slider.min = 'B';
+        helper.scope.slider.max = 'D';
+        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
+        helper.scope.slider.options.showTicks = true;
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(1);
+        expect(helper.slider.highValue).to.equal(3);
+      });
+      it('should set correct step/floor/ceil when stepsArray is used with objects', function() {
+        helper.scope.slider.min = 'B';
+        helper.scope.slider.max = 'D';
+        helper.scope.slider.options.stepsArray = [
+          {value: 'A'},
+          {value: 'B'},
+          {value: 'C'},
+          {value: 'D'},
+          {value: 'E'}
+        ];
+        helper.scope.$digest();
+        expect(helper.slider.options.step).to.equal(1);
+        expect(helper.slider.options.floor).to.equal(0);
+        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(1);
+        expect(helper.slider.highValue).to.equal(3);
+      });
    });
    describe('options expression specific - ', function() {
@@ -761,14 +799,13 @@
      });
      it('should set correct step/floor/ceil and translate function when stepsArray is used', function() {
+        helper.scope.slider.value = 'C';
        helper.scope.slider.options.stepsArray = ['A', 'B', 'C', 'D', 'E'];
        helper.scope.$digest();
        expect(helper.slider.options.step).to.equal(1);
        expect(helper.slider.options.floor).to.equal(0);
        expect(helper.slider.options.ceil).to.equal(4);
+        expect(helper.slider.lowValue).to.equal(2);
-        expect(helper.slider.customTrFn(0)).to.equal('A');
-        expect(helper.slider.customTrFn(2)).to.equal('C');
      });
      it('should sanitize rzSliderModel between floor and ceil', function() {
@@ -1117,7 +1154,7 @@
      });
    });
-    describe('range slider spcific - ', function() {
+    describe('range slider specific - ', function() {
      beforeEach(function() {
        var sliderConf = {
          min: 10,

--- a/tests/specs/range-slider-init-test.js
+++ b/tests/specs/range-slider-init-test.js
@@ -72,17 +72,17 @@
    });
    it('should round the model value to the step', function() {
-      helper.scope.slider.min = 13;
+      helper.scope.slider.min = 23;
-      helper.scope.slider.max = 94;
+      helper.scope.slider.max = 84;
      helper.scope.$digest();
-      expect(helper.scope.slider.min).to.equal(10);
+      expect(helper.scope.slider.min).to.equal(20);
-      expect(helper.scope.slider.max).to.equal(90);
+      expect(helper.scope.slider.max).to.equal(80);
-      helper.scope.slider.min = 15;
+      helper.scope.slider.min = 25;
      helper.scope.slider.max = 95;
      helper.scope.$digest();
      $timeout.flush(); //to flush the throttle function
-      expect(helper.scope.slider.min).to.equal(20);
+      expect(helper.scope.slider.min).to.equal(30);
      expect(helper.scope.slider.max).to.equal(100);
    });

--- a/tests/specs/ticks-test.js
+++ b/tests/specs/ticks-test.js
@@ -80,6 +80,25 @@
      expect(secondTick.text()).to.equal('10');
    });
+    it('should create the correct number of ticks when showTicksValues is true and used with stepsArray', function() {
+      var sliderConf = {
+        value: 'C',
+        options: {
+          stepsArray: ['A', 'B', 'C', 'D', 'E'],
+          showTicksValues: true
+        }
+      };
+      helper.createSlider(sliderConf);
+      expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(5);
+      expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(5);
+      var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[0]);
+      expect(firstTick.text()).to.equal('A');
+      var secondTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[1]);
+      expect(secondTick.text()).to.equal('B');
+      var lasTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[4]);
+      expect(lasTick.text()).to.equal('E');
+    });
    it('should create the correct number of ticks when showTicksValues is an integer', function() {
      var sliderConf = {
        value: 50,