Skip to content

I
i20rzslider
Commit 4bff1a84 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Merge pull request #246 from angular-slider/enforceStep 

feat(enforceStep): Add an enforceStep option (defaults to true)
parents dc0217e9 f24acb8a
Expand all Show whitespace changes
Inline Side-by-side
Showing with 40 additions and 13 deletions
README.md
View file @ 4bff1a84
......@@ -184,6 +184,7 @@ The default options are:
selectionBarColor: null,
keyboardSupport: true,
scale: 1,
enforceStep: true,
enforceRange: false,
noSwitching: false,
onlyBindHandles: false,
......@@ -258,6 +259,8 @@ $scope.slider = {
**scale** - _Number (defaults to 1)_: If you display the slider in an element that uses `transform: scale(0.5)`, set the `scale` value to 2 so that the slider is rendered properly and the events are handled correctly.
**enforceStep** - _Boolean (defaults to true)_: Set to true to force the value to be rounded to the step, even when modified from the outside.. When set to false, if the model values are modified from outside the slider, they are not rounded and can be between two steps.
**enforceRange** - _Boolean (defaults to false)_: Set to true to round the `rzSliderModel` and `rzSliderHigh` to the slider range even when modified from outside the slider. When set to false, if the model values are modified from outside the slider, they are not rounded but they are still rendered properly on the slider.
**noSwitching** - _Boolean (defaults to false)_: Set to true to prevent to user from switching the min and max handles. *Applies to range slider only.*
......
dist/rzslider.css
View file @ 4bff1a84
/*! angularjs-slider - v2.6.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-01-31 */
2016-02-06 */
rzslider {
position: relative;
display: inline-block;
......
dist/rzslider.js
View file @ 4bff1a84
/*! angularjs-slider - v2.6.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-02-03 */
2016-02-06 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -52,6 +52,7 @@
selectionBarColor: null,
keyboardSupport: true,
scale: 1,
enforceStep: true,
enforceRange: false,
noSwitching: false,
onlyBindHandles: false,
......@@ -636,9 +637,11 @@
this.minValue = this.options.floor;
if (this.options.enforceStep) {
this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel);
if (this.range)
this.scope.rzSliderHigh = this.roundStep(this.scope.rzSliderHigh);
}
if (this.options.ceil != null)
this.maxValue = this.options.ceil;
......
dist/rzslider.min.css
View file @ 4bff1a84
/*! angularjs-slider - v2.6.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-01-31 */
/*! angularjs-slider - v2.6.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-02-06 */
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{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 .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:0;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.js
View file @ 4bff1a84
This diff is collapsed.
src/rzslider.js
View file @ 4bff1a84
......@@ -56,6 +56,7 @@
selectionBarColor: null,
keyboardSupport: true,
scale: 1,
enforceStep: true,
enforceRange: false,
noSwitching: false,
onlyBindHandles: false,
......@@ -640,9 +641,11 @@
this.minValue = this.options.floor;
if (this.options.enforceStep) {
this.scope.rzSliderModel = this.roundStep(this.scope.rzSliderModel);
if (this.range)
this.scope.rzSliderHigh = this.roundStep(this.scope.rzSliderHigh);
}
if (this.options.ceil != null)
this.maxValue = this.options.ceil;
......
tests/spec/rz-slider-service-test.js
View file @ 4bff1a84
......@@ -104,14 +104,14 @@ describe('rzslider - ', function() {
slider.resetSlider.called.should.be.true;
});
it('should round the model value to the step', function() {
it('should round the model value to the step by default', function() {
scope.slider.value = 54;
scope.$digest();
expect(scope.slider.value).to.equal(50);
scope.slider.value = 55;
scope.$digest();
$timeout.flush(); //to flush the throttle function
$timeout.flush(); //to flush the throttle function since we modify twice in a row
expect(scope.slider.value).to.equal(60);
});
......@@ -317,6 +317,24 @@ describe('rzslider - ', function() {
expect(slider.options.step).to.equal(1);
});
it('should not round value to step if enforceStep is false', function() {
scope.slider.options.enforceStep = false;
scope.$digest();
scope.slider.value = 14;
scope.$digest();
expect(scope.slider.value).to.equal(14);
});
it('should round value to step if enforceStep is true', function() {
scope.slider.options.enforceStep = true;
scope.$digest();
scope.slider.value = 14;
scope.$digest();
expect(scope.slider.value).to.equal(10);
});
it('should set the showTicks scope flag to true when showTicks is true', function() {
scope.slider.options.showTicks = true;
scope.$digest();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment