Skip to content

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

2.8.0 release

parent 3faa86cd
Expand all Show whitespace changes
Inline Side-by-side
Showing with 46 additions and 18 deletions
CHANGELOG.md
View file @ ae78b503
# 2.7.1 (2016-02-08)
## Features
- Add a `getPointerColor` option to dynamically change the pointers color (#253).
# 2.7.1 (2016-02-06)
## Fix
- Fix high label positioning when size is different than the ceil one.
......
README.md
View file @ ae78b503
......@@ -181,7 +181,7 @@ The default options are:
ticksTooltip: null,
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
getSelectionBarColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
......@@ -250,7 +250,7 @@ $scope.slider = {
**getSelectionBarColor** - _Function(value) or Function(minVal, maxVal) (defaults to null)_: Function that returns the current color of the selection bar. If the returned color depends on a model value (either `rzScopeModel`or `'rzSliderHigh`), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated.
**getPointerColor** - _Function(value, pointerType) (defaults to null)_: Function that returns the current color of a pointer. To handle range slider pointer independently, you should evaluate pointerType within the given function where "min" stands for `rzScopeModel` and "max" for `rzScopeHigh` values. Indeed, when the function is called, there is no certainty that the model has already been updated.
**getPointerColor** - _Function(value, pointerType) (defaults to null)_: Function that returns the current color of a pointer. If the returned color depends on a model value (either `rzScopeModel`or `'rzSliderHigh`), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated. To handle range slider pointers independently, you should evaluate pointerType within the given function where "min" stands for `rzScopeModel` and "max" for `rzScopeHigh` values.
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
......
bower.json
View file @ ae78b503
{
"name": "angularjs-slider",
"version": "2.7.1",
"version": "2.8.0",
"homepage": "https://github.com/angular-slider/angularjs-slider",
"authors": [
"Rafal Zajac <rzajac@gmail.com>",
......
demo/demo.js
View file @ ae78b503
......@@ -69,7 +69,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with selection bar
//Slider with selection bar color
$scope.color_slider_bar = {
value: 12,
options: {
......@@ -86,6 +86,22 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with pointer color
$scope.color_slider_pointer = {
value: 12,
options: {
getPointerColor: function(value) {
if (value <= 3)
return 'red';
if (value <= 6)
return 'orange';
if (value <= 9)
return 'yellow';
return '#2AE02A';
}
}
};
//Slider config with floor, ceil and step
$scope.slider_floor_ceil = {
value: 12,
......
demo/index.html
View file @ ae78b503
......@@ -86,6 +86,14 @@
></rzslider>
</article>
<article>
<h2>Slider with dynamic pointer color</h2>
<rzslider
rz-slider-model="color_slider_pointer.value"
rz-slider-options="color_slider_pointer.options"
></rzslider>
</article>
<article>
<h2>Slider with custom floor/ceil/step</h2>
<rzslider
......
dist/rzslider.css
View file @ ae78b503
/*! angularjs-slider - v2.7.1 -
/*! angularjs-slider - v2.8.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-07 */
2016-02-08 */
rzslider {
position: relative;
display: inline-block;
......
dist/rzslider.js
View file @ ae78b503
/*! angularjs-slider - v2.7.1 -
/*! angularjs-slider - v2.8.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-07 */
2016-02-08 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -49,7 +49,7 @@
ticksTooltip: null,
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
getSelectionBarColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
......
dist/rzslider.min.css
View file @ ae78b503
/*! angularjs-slider - v2.7.1 - (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-07 */
/*! angularjs-slider - v2.8.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-08 */
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 @ ae78b503
This diff is collapsed.
package.json
View file @ ae78b503
{
"name": "angularjs-slider",
"version": "2.7.1",
"version": "2.8.0",
"description": "AngularJS slider directive with no external dependencies. Mobile friendly!.",
"main": "dist/rzslider.js",
"repository": {
......
src/rzslider.js
View file @ ae78b503
......@@ -53,7 +53,7 @@
ticksTooltip: null,
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
getSelectionBarColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
......
tests/spec/rz-slider-service-test.js
View file @ ae78b503
......@@ -601,12 +601,12 @@ describe('rzslider - ', function() {
floor: 0,
ceil: 10,
getPointerColor: function(v, type) {
if ( type == 'min' ) {
if ( type === 'min' ) {
if (v < 5) return 'red';
return 'green';
}
if ( type == 'max' ) {
if ( type === 'max' ) {
if (v < 5) return 'blue';
return 'orange';
}
......@@ -632,12 +632,12 @@ describe('rzslider - ', function() {
floor: 0,
ceil: 10,
getPointerColor: function(v, type) {
if ( type == 'min' ) {
if ( type === 'min' ) {
if (v < 5) return 'red';
return 'green';
}
if ( type == 'max' ) {
if ( type === 'max' ) {
if (v < 5) return 'blue';
return 'orange';
}
......
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