Skip to content

I
i20rzslider
Commit 8015f5bd authored by Rafal Zajac's avatar Rafal Zajac
Browse files
Options

- Refoactor 

- Performance
- Cleanup
- Documentation
parent 2fe464dd
Expand all Show whitespace changes
Inline Side-by-side
Showing with 547 additions and 418 deletions
README.md
View file @ 8015f5bd
...@@ -2,23 +2,140 @@ ...@@ -2,23 +2,140 @@
Slider directive implementation for AngularJS, without any dependencies. Slider directive implementation for AngularJS, without any dependencies.
## Example - Mobile friendly
- Fast
- Well documented
- Customizable
- Simple to use
## Examples
### Single slider
```javascript
// In your controller
$scope.priceSlider = 150;
```
```html ```html
<div> <div>
<rzslider rz-slider-model="priceSlider"></rzslider>
</div>
```
Above example would render a slider from 0 to 150. If you need floor and ceiling values use `rz-slider-floor` and `rz-slider-ceil` attributes.
```html
<div>
<rzslider
rz-slider-model="priceSlider"
rz-slider-ceil="450"></rzslider>
<!-- OR -->
<rzslider <rzslider
rz-slider-model="priceSlider"
rz-slider-floor="0"
rz-slider-ceil="450"></rzslider>
</div>
```
### Range slider
```javascript
// In your controller
$scope.priceSlider = {
min: 100,
max: 180,
ceil: 500,
floor: 0
};
```
```html
<rzslider
rz-slider-floor="priceSlider.floor" rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil" rz-slider-ceil="priceSlider.ceil"
rz-slider-low="priceSlider.min" rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"></rzslider>
```
## Directive attributes
**rz-slider-model**
> Model for low value slider. If only _rz-slider-model_ is provided single slider will be rendered.
**rz-slider-high**
> Model for high value slider. Providing both _rz-slider-high_ and _rz-slider-model_ will render range slider.
**rz-slider-floor**
> Minimum value for a slider.
**rz-slider-ceil**
> Maximum value for a slider.
**rz-slider-step**
> slider step.
**rz-slider-precision**
> The precision to display values with. The `toFixed()` is used internally for this.
**rz-slider-translate**
> Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers do this:
```javascript
// In your controller
$scope.priceSlider = {
min: 100,
max: 180,
ceil: 500,
floor: 0
};
$scope.translate = function(value)
{
return '$' + value;
}
```
```html
<rzslider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max" rz-slider-high="priceSlider.max"
rz-slider-step="5"></rzslider> rz-slider-translate="translate"></rzslider>
</div>
``` ```
## Plunkers ## Plunker example
[http://embed.plnkr.co/EqGIlU/preview](http://embed.plnkr.co/EqGIlU/preview) [http://embed.plnkr.co/EqGIlU/preview](http://embed.plnkr.co/EqGIlU/preview)
## Changelog
**v0.0.1**
Original rewrite to JavaScript
**v0.1.0**
Bug fixes
Performance improvements
Reduce number of angular bindings
Reduce number of function calls in event handlers
Avoid recalculate style
Hit 60fps
LESS variables for easier slider color customization
## Disclaimer ## Disclaimer
This project is based on [https://github.com/prajwalkman/angular-slider](https://github.com/prajwalkman/angular-slider). It has been rewritten from scratch in JavaScript This project is based on [https://github.com/prajwalkman/angular-slider](https://github.com/prajwalkman/angular-slider). It has been rewritten from scratch in JavaScript
......
demo/index.html
View file @ 8015f5bd
...@@ -11,15 +11,20 @@ ...@@ -11,15 +11,20 @@
<body ng-controller="MainCtrl"> <body ng-controller="MainCtrl">
<div style="background-color: #808080;margin-left: 50px;margin-right: 50px; padding: 30px;"> <div style="background-color: #808080;margin-left: 40px;margin-right: 50px; padding: 30px;">
<pre>{{ priceSlider | json }}</pre> <pre>{{ priceSlider | json }}</pre>
<input type="text" ng-model="priceSlider.min"/><br/>
<input type="text" ng-model="priceSlider.max"/><br/>
<br/>
<rzslider <rzslider
rz-slider-floor="priceSlider.floor" rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil" rz-slider-ceil="priceSlider.ceil"
rz-slider-low="priceSlider.min" rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max" rz-slider-high="priceSlider.max"
rz-slider-step="5"></rzslider> rz-slider-step="1"></rzslider>
<br> <br> <br> <br> <br> <br>
<pre>{{ priceSlider2 | json }}</pre> <pre>{{ priceSlider2 | json }}</pre>
...@@ -30,6 +35,12 @@ ...@@ -30,6 +35,12 @@
rz-slider-model="priceSlider2" rz-slider-model="priceSlider2"
rz-slider-translate="translate"></rzslider> rz-slider-translate="translate"></rzslider>
<pre>{{ priceSlider2 | json }}</pre>
<br> <br>
<rzslider rz-slider-model="priceSlider3"
rz-slider-floor="50"
rz-slider-ceil="450"></rzslider>
</div> </div>
</body> </body>
...@@ -43,13 +54,14 @@ ...@@ -43,13 +54,14 @@
app.controller('MainCtrl', function($scope) app.controller('MainCtrl', function($scope)
{ {
$scope.priceSlider = { $scope.priceSlider = {
min: 0, min: 4,
max: 300, max: 481,
ceil: 500, ceil: 500,
floor: 0 floor: 0
}; };
$scope.priceSlider2 = 100; $scope.priceSlider2 = 150;
$scope.priceSlider3 = 250;
$scope.translate = function(value) $scope.translate = function(value)
{ {
......
dist/rzslider.css
View file @ 8015f5bd
...@@ -47,7 +47,7 @@ rzslider span.pointer { ...@@ -47,7 +47,7 @@ rzslider span.pointer {
width: 32px; width: 32px;
height: 32px; height: 32px;
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #ffffff;
-webkit-border-radius: 16px; -webkit-border-radius: 16px;
-moz-border-radius: 16px; -moz-border-radius: 16px;
border-radius: 16px; border-radius: 16px;
...@@ -86,6 +86,5 @@ rzslider span.bubble.selection { ...@@ -86,6 +86,5 @@ rzslider span.bubble.selection {
} }
rzslider span.bubble.limit { rzslider span.bubble.limit {
/*color: #808080;*/ color: #67b700;
} }
\ No newline at end of file
dist/rzslider.min.css
View file @ 8015f5bd
/*! angularjs-slider - v0.0.1 - (c) Rafal Zajac <rzajac@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2013-12-12 */ /*! angularjs-slider - v0.1.0 - (c) Rafal Zajac <rzajac@gmail.com>, https://github.com/rzajac/angularjs-slider.git - 2013-12-13 */
rzslider{position:relative;display:inline-block;width:100%;height:2px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.base{width:100%;height:100%;padding:0}rzslider span.bar{z-index:0;width:100%;height:100%;background:#fff}rzslider span.bar.selection{z-index:1;width:0;background:#67b700}rzslider span.pointer{top:-15px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#fff;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#71818e;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.pointer:hover:after{background-color:#67b700}rzslider span.pointer.active:after{background-color:#67b700}rzslider span.bubble{top:-32px;padding:1px 3px 1px 3px;color:#67b700;cursor:default}rzslider span.bubble.selection{top:15px} rzslider{position:relative;display:inline-block;width:100%;height:2px;margin:30px 0 15px 0;vertical-align:middle}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider span.base{width:100%;height:100%;padding:0}rzslider span.bar{z-index:0;width:100%;height:100%;background:#fff}rzslider span.bar.selection{z-index:1;width:0;background:#67b700}rzslider span.pointer{top:-15px;z-index:2;width:32px;height:32px;cursor:pointer;background-color:#fff;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider span.pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#71818e;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider span.pointer:hover:after{background-color:#67b700}rzslider span.pointer.active:after{background-color:#67b700}rzslider span.bubble{top:-32px;padding:1px 3px 1px 3px;color:#67b700;cursor:default}rzslider span.bubble.selection{top:15px}rzslider span.bubble.limit{color:#67b700}
\ No newline at end of file \ No newline at end of file
dist/rzslider.min.js
View file @ 8015f5bd
This diff is collapsed.
package.json
View file @ 8015f5bd
{ {
"name": "angularjs-slider", "name": "angularjs-slider",
"version": "0.0.1", "version": "0.1.0",
"description": "Slider directive for AngularJS. No dependencies.", "description": "Slider directive for AngularJS. No dependencies.",
"main": "rzslider.js", "main": "rzslider.js",
"repository": { "repository": {
......
rzslider.js
View file @ 8015f5bd
This diff is collapsed.
rzslider.less
View file @ 8015f5bd
...@@ -13,6 +13,13 @@ ...@@ -13,6 +13,13 @@
border-radius: @radius; border-radius: @radius;
} }
@handleActiveColor: #67b700;
@handleHoverColor: #67b700;
@labelTextColor: #67b700;
@handleBgColor: #fff;
@handleInnerColor: #71818e;
@limitLabelTextColor: @labelTextColor;
rzslider { rzslider {
display: inline-block; display: inline-block;
position: relative; position: relative;
...@@ -52,7 +59,7 @@ rzslider span.pointer { ...@@ -52,7 +59,7 @@ rzslider span.pointer {
width: 32px; width: 32px;
height: 32px; height: 32px;
top: -15px; top: -15px;
background-color: #fff; background-color: @handleBgColor;
z-index: 2; z-index: 2;
.rounded(16px); .rounded(16px);
} }
...@@ -65,22 +72,22 @@ rzslider span.pointer:after { ...@@ -65,22 +72,22 @@ rzslider span.pointer:after {
top: 12px; top: 12px;
left: 12px; left: 12px;
.rounded(4px); .rounded(4px);
background: #71818e; background: @handleInnerColor;
} }
rzslider span.pointer:hover:after { rzslider span.pointer:hover:after {
background-color: #67b700; background-color: @handleHoverColor;
} }
rzslider span.pointer.active:after { rzslider span.pointer.active:after {
background-color: #67b700; background-color: @handleActiveColor;
} }
rzslider span.bubble { rzslider span.bubble {
cursor: default; cursor: default;
top: -32px; top: -32px;
padding: 1px 3px 1px 3px; padding: 1px 3px 1px 3px;
color: #67b700; color: @labelTextColor;
} }
rzslider span.bubble.selection { rzslider span.bubble.selection {
...@@ -88,5 +95,5 @@ rzslider span.bubble.selection { ...@@ -88,5 +95,5 @@ rzslider span.bubble.selection {
} }
rzslider span.bubble.limit { rzslider span.bubble.limit {
/*color: #808080;*/ color: @limitLabelTextColor;
} }
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