- Refoactor

- Performance - Cleanup - Documentation
maknapp · Dec 13, 2013 · 8015f5b · 8015f5b
1 parent 2fe464d
commit 8015f5b
Show file tree

Hide file tree

Showing 8 changed files with 547 additions and 418 deletions.
diff --git a/README.md b/README.md
@@ -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

diff --git a/demo/index.html b/demo/index.html
@@ -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)
         {

diff --git a/dist/rzslider.css b/dist/rzslider.css
@@ -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;
 }
diff --git a/dist/rzslider.min.css b/dist/rzslider.min.css
diff --git a/dist/rzslider.min.js b/dist/rzslider.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angularjs-slider",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "Slider directive for AngularJS. No dependencies.",
   "main": "rzslider.js",
   "repository": {