Skip to content

Commit 176dbef

Browse files
ValentinHValentinH
committed
Add a bindIndexForStepsArray option
1 parent 2234353 commit 176dbef

File tree

8 files changed

+230
-25
lines changed

8 files changed

+230
-25
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 4.1.0 (not released yet)
2+
## Improvement
3+
- Add a `bindIndexForStepsArray` option that enable to use `stepsArray` with the same behavior as before 4.0 (#345).
4+
15
# 4.0.2 (2016-06-07)
26
## Improvement
37
- Add a `mergeRangeLabelsIfSame` option (#245).

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -194,6 +194,7 @@ The default options are:
194194
translate: null,
195195
getLegend: null,
196196
stepsArray: null,
197+
bindIndexForStepsArray: false,
197198
draggableRange: false,
198199
draggableRangeOnly: false,
199200
showSelectionBar: false,
@@ -277,7 +278,7 @@ $scope.slider = {
277278
**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.
278279

279280
**stepsArray** - _Array_: If you want to display a slider with non linear/number steps.
280-
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.
281+
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. By default, the `rz-slider-model` and `rz-slider-high` values will be the value of the selected item in the stepsArray. They can also be bound to the index of the selected item by setting the `bindIndexForStepsArray` option to `true`.
281282

282283
`stepsArray` can also be an array of objects like:
283284

@@ -286,7 +287,9 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
286287
{value: 'A'}, // the display value will be *A*
287288
{value: 10, legend: 'Legend for 10'} // the display value will be 10 and a legend will be displayed under the corresponding tick.
288289
]
289-
```
290+
````
291+
292+
**bindIndexForStepsArray** - _Boolean (defaults to false)_: Set to true to bind the index of the selected item to `rz-slider-model` and `rz-slider-high`. (This was the default behavior prior to 4.0).
290293

291294
**draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar. *Applies to range slider only.*
292295

‎dist/rzslider.js‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
translate: null,
4040
getLegend: null,
4141
stepsArray: null,
42+
bindIndexForStepsArray: false,
4243
draggableRange: false,
4344
draggableRangeOnly: false,
4445
showSelectionBar: false,
@@ -428,15 +429,23 @@
428429
},
429430

430431
syncLowValue: function() {
431-
if (this.options.stepsArray)
432-
this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
432+
if (this.options.stepsArray) {
433+
if (!this.options.bindIndexForStepsArray)
434+
this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
435+
else
436+
this.lowValue = this.scope.rzSliderModel
437+
}
433438
else
434439
this.lowValue = this.scope.rzSliderModel;
435440
},
436441

437442
syncHighValue: function() {
438-
if (this.options.stepsArray)
439-
this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
443+
if (this.options.stepsArray) {
444+
if (!this.options.bindIndexForStepsArray)
445+
this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
446+
else
447+
this.highValue = this.scope.rzSliderHigh
448+
}
440449
else
441450
this.highValue = this.scope.rzSliderHigh;
442451
},
@@ -449,15 +458,23 @@
449458
},
450459

451460
applyLowValue: function() {
452-
if (this.options.stepsArray)
453-
this.scope.rzSliderModel = this.getStepValue(this.lowValue);
461+
if (this.options.stepsArray) {
462+
if (!this.options.bindIndexForStepsArray)
463+
this.scope.rzSliderModel = this.getStepValue(this.lowValue);
464+
else
465+
this.scope.rzSliderModel = this.lowValue
466+
}
454467
else
455468
this.scope.rzSliderModel = this.lowValue;
456469
},
457470

458471
applyHighValue: function() {
459-
if (this.options.stepsArray)
460-
this.scope.rzSliderHigh = this.getStepValue(this.highValue);
472+
if (this.options.stepsArray) {
473+
if (!this.options.bindIndexForStepsArray)
474+
this.scope.rzSliderHigh = this.getStepValue(this.highValue);
475+
else
476+
this.scope.rzSliderHigh = this.highValue
477+
}
461478
else
462479
this.scope.rzSliderHigh = this.highValue;
463480
},
@@ -552,6 +569,8 @@
552569
}
553570
else {
554571
this.customTrFn = function(modelValue) {
572+
if(this.options.bindIndexForStepsArray)
573+
return this.getStepValue(modelValue)
555574
return modelValue;
556575
};
557576
}
@@ -753,7 +772,7 @@
753772
getDimension = false;
754773

755774
if (useCustomTr) {
756-
if (this.options.stepsArray)
775+
if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
757776
value = this.getStepValue(value);
758777
valStr = String(this.customTrFn(value, this.options.id, which));
759778
}
@@ -1239,7 +1258,7 @@
12391258
* @returns {*}
12401259
*/
12411260
getDisplayValue: function(value, which) {
1242-
if (this.options.stepsArray) {
1261+
if (this.options.stepsArray && !this.options.bindIndexForStepsArray) {
12431262
value = this.getStepValue(value);
12441263
}
12451264
return this.customTrFn(value, this.options.id, which);

‎dist/rzslider.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzslider.js‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
translate: null,
4444
getLegend: null,
4545
stepsArray: null,
46+
bindIndexForStepsArray: false,
4647
draggableRange: false,
4748
draggableRangeOnly: false,
4849
showSelectionBar: false,
@@ -432,15 +433,23 @@
432433
},
433434

434435
syncLowValue: function() {
435-
if (this.options.stepsArray)
436-
this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
436+
if (this.options.stepsArray) {
437+
if (!this.options.bindIndexForStepsArray)
438+
this.lowValue = this.findStepIndex(this.scope.rzSliderModel);
439+
else
440+
this.lowValue = this.scope.rzSliderModel
441+
}
437442
else
438443
this.lowValue = this.scope.rzSliderModel;
439444
},
440445

441446
syncHighValue: function() {
442-
if (this.options.stepsArray)
443-
this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
447+
if (this.options.stepsArray) {
448+
if (!this.options.bindIndexForStepsArray)
449+
this.highValue = this.findStepIndex(this.scope.rzSliderHigh);
450+
else
451+
this.highValue = this.scope.rzSliderHigh
452+
}
444453
else
445454
this.highValue = this.scope.rzSliderHigh;
446455
},
@@ -453,15 +462,23 @@
453462
},
454463

455464
applyLowValue: function() {
456-
if (this.options.stepsArray)
457-
this.scope.rzSliderModel = this.getStepValue(this.lowValue);
465+
if (this.options.stepsArray) {
466+
if (!this.options.bindIndexForStepsArray)
467+
this.scope.rzSliderModel = this.getStepValue(this.lowValue);
468+
else
469+
this.scope.rzSliderModel = this.lowValue
470+
}
458471
else
459472
this.scope.rzSliderModel = this.lowValue;
460473
},
461474

462475
applyHighValue: function() {
463-
if (this.options.stepsArray)
464-
this.scope.rzSliderHigh = this.getStepValue(this.highValue);
476+
if (this.options.stepsArray) {
477+
if (!this.options.bindIndexForStepsArray)
478+
this.scope.rzSliderHigh = this.getStepValue(this.highValue);
479+
else
480+
this.scope.rzSliderHigh = this.highValue
481+
}
465482
else
466483
this.scope.rzSliderHigh = this.highValue;
467484
},
@@ -556,6 +573,8 @@
556573
}
557574
else {
558575
this.customTrFn = function(modelValue) {
576+
if(this.options.bindIndexForStepsArray)
577+
return this.getStepValue(modelValue)
559578
return modelValue;
560579
};
561580
}
@@ -757,7 +776,7 @@
757776
getDimension = false;
758777

759778
if (useCustomTr) {
760-
if (this.options.stepsArray)
779+
if (this.options.stepsArray && !this.options.bindIndexForStepsArray)
761780
value = this.getStepValue(value);
762781
valStr = String(this.customTrFn(value, this.options.id, which));
763782
}
@@ -1243,7 +1262,7 @@
12431262
* @returns {*}
12441263
*/
12451264
getDisplayValue: function(value, which) {
1246-
if (this.options.stepsArray) {
1265+
if (this.options.stepsArray && !this.options.bindIndexForStepsArray) {
12471266
value = this.getStepValue(value);
12481267
}
12491268
return this.customTrFn(value, this.options.id, which);

‎tests/specs/accessibility-test.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,28 @@
221221
expect(helper.slider.minH.attr('aria-valuenow')).to.equal('C');
222222
expect(helper.slider.minH.attr('aria-valuetext')).to.equal('C');
223223
});
224+
225+
it('should have accessible slider when values are text but bindIndexForStepsArray is true', function() {
226+
var sliderConf = {
227+
value: 1,
228+
options: {
229+
stepsArray: ['A', 'B', 'C'],
230+
bindIndexForStepsArray: true
231+
}
232+
};
233+
helper.createSlider(sliderConf);
234+
expect(helper.slider.minH.attr('role')).to.equal('slider');
235+
expect(helper.slider.minH.attr('tabindex')).to.equal('0');
236+
expect(helper.slider.minH.attr('aria-valuenow')).to.equal('1');
237+
expect(helper.slider.minH.attr('aria-valuetext')).to.equal('B');
238+
expect(helper.slider.minH.attr('aria-valuemin')).to.equal('0');
239+
expect(helper.slider.minH.attr('aria-valuemax')).to.equal('2');
240+
241+
helper.scope.slider.value = 2;
242+
helper.scope.$digest();
243+
expect(helper.slider.minH.attr('aria-valuenow')).to.equal('2');
244+
expect(helper.slider.minH.attr('aria-valuetext')).to.equal('C');
245+
});
224246
});
225247
}());
226248

0 commit comments

Comments
 (0)