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 Hide whitespace changes
Inline Side-by-side
Showing with 547 additions and 418 deletions
README.md
View file @ 8015f5bd
......@@ -2,23 +2,140 @@
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
<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-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-low="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-step="5"></rzslider>
rz-slider-model="priceSlider"
rz-slider-ceil="450"></rzslider>
<!-- OR -->
<rzslider
rz-slider-model="priceSlider"
rz-slider-floor="0"
rz-slider-ceil="450"></rzslider>
</div>
```
## Plunkers
### 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-ceil="priceSlider.ceil"
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-translate="translate"></rzslider>
```
## Plunker example
[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
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 @@
<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>
<input type="text" ng-model="priceSlider.min"/><br/>
<input type="text" ng-model="priceSlider.max"/><br/>
<br/>
<rzslider
rz-slider-floor="priceSlider.floor"
rz-slider-ceil="priceSlider.ceil"
rz-slider-low="priceSlider.min"
rz-slider-model="priceSlider.min"
rz-slider-high="priceSlider.max"
rz-slider-step="5"></rzslider>
rz-slider-step="1"></rzslider>
<br> <br> <br>
<pre>{{ priceSlider2 | json }}</pre>
......@@ -30,6 +35,12 @@
rz-slider-model="priceSlider2"
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>
</body>
......@@ -43,13 +54,14 @@
app.controller('MainCtrl', function($scope)
{
$scope.priceSlider = {
min: 0,
max: 300,
min: 4,
max: 481,
ceil: 500,
floor: 0
};
$scope.priceSlider2 = 100;
$scope.priceSlider2 = 150;
$scope.priceSlider3 = 250;
$scope.translate = function(value)
{
......
dist/rzslider.css
View file @ 8015f5bd
......@@ -47,7 +47,7 @@ rzslider span.pointer {
width: 32px;
height: 32px;
cursor: pointer;
background-color: #fff;
background-color: #ffffff;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
......@@ -86,6 +86,5 @@ rzslider span.bubble.selection {
}
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 */
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}
\ No newline at end of file
/*! 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 span.bubble.limit{color:#67b700}
\ 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",
"version": "0.0.1",
"version": "0.1.0",
"description": "Slider directive for AngularJS. No dependencies.",
"main": "rzslider.js",
"repository": {
......
rzslider.js
View file @ 8015f5bd
This diff is collapsed.
rzslider.less
View file @ 8015f5bd
......@@ -13,6 +13,13 @@
border-radius: @radius;
}
@handleActiveColor: #67b700;
@handleHoverColor: #67b700;
@labelTextColor: #67b700;
@handleBgColor: #fff;
@handleInnerColor: #71818e;
@limitLabelTextColor: @labelTextColor;
rzslider {
display: inline-block;
position: relative;
......@@ -52,7 +59,7 @@ rzslider span.pointer {
width: 32px;
height: 32px;
top: -15px;
background-color: #fff;
background-color: @handleBgColor;
z-index: 2;
.rounded(16px);
}
......@@ -65,22 +72,22 @@ rzslider span.pointer:after {
top: 12px;
left: 12px;
.rounded(4px);
background: #71818e;
background: @handleInnerColor;
}
rzslider span.pointer:hover:after {
background-color: #67b700;
background-color: @handleHoverColor;
}
rzslider span.pointer.active:after {
background-color: #67b700;
background-color: @handleActiveColor;
}
rzslider span.bubble {
cursor: default;
top: -32px;
padding: 1px 3px 1px 3px;
color: #67b700;
color: @labelTextColor;
}
rzslider span.bubble.selection {
......@@ -88,5 +95,5 @@ rzslider span.bubble.selection {
}
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