Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Venturocket/angular-slider

Slider directive for AngularJS.
https://github.com/Venturocket/angular-slider

Last synced: 3 months ago
JSON representation

Slider directive for AngularJS.

Awesome Lists containing this project

README 

        
# angular-slider [![Build Status](https://secure.travis-ci.org/Venturocket/angular-slider.png?branch=master)](http://travis-ci.org/Venturocket/angular-slider)

Slider directive for AngularJS. https://venturocket.github.io/angular-slider  

License: MIT



## Features

- Single or dual knob

- Fully Stylable

- Custom arbitrary scaling

- Adjustable knob "Stickiness"

- Adjustable minimum range width

- Draggable selection range

- Full touch event support



## Known Issues

- When hidden during initialization (`display: none;`) the slider might not display correctly when shown. Issue `$scope.$broadcast('refreshSlider');` 

in a parent scope to tell the slider to update the DOM. 

- The `step` attribute conflicts with angular-foundation's `step` directive ([docs](http://madmimi.github.io/angular-foundation/#/tour)). To remedy this, 

use `step-width` instead (it's an alias of `step`). `step` will be deprecated in the next minor release, so if you want to do a bit of future proofing 

you can start using `step-width` now and save yourself a bit of migration work later .



## Installation



```

bower install venturocket-angular-slider

```



## Usage

### Requirements



Add ``s to your `html` files for [angular](https://github.com/angular/bower-angular), [angular-touch](https://github.com/angular/bower-angular-touch) and angular-slider:



```html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js">



```



And add `vr.directives.slider` as a dependency for your app:



```javascript

angular.module('myApp', ['vr.directives.slider', ...]);

```



**NOTE:** in IE10/11 an annoying tooltip will show up unless you add the following css:

```css

::-ms-tooltip {

	display: none;

}

```



### Single Knob

#### Markup

As an element:

```html



```

As an attribute:

```html





```



#### Parameters

|Param      |Type   |Required |Default |Details |

|-----------|-------|---------|--------|--------|

|ng-model   |expression |Yes  |none    |Assignable angular expression to which to data-bind the value. |

|floor      |float  |Yes      |none    |The lowest value possible |

|ceiling    |float  |Yes      |none    |The highest value possible |

|step       |float  |No       |inf     |The width between each tick. |

|precision  |integer|No       |0       |The numerical precision to which to round the value. |

|stretch    |integer|No       |3       |How sticky the knobs will act. 1 = no stickiness |

|translate-fn|expression|No   |none    |A translation function to apply to all view values. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()") |

|scale-fn   |expression|No    |none    |A scaling function to apply to the value. See the `Scaling` section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()") |

|inverse-scale-fn|expression|No|none   |The inverse of the scaling function. This is required if a scaling function is specified. See the `Scaling` section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()") |

--

### Dual Knob

#### Markup

As an element:

```html



```

As an attribute:

```html





```



#### Parameters

|Param      |Type   |Required |Default |Details |

|-----------|-------|---------|--------|--------|

|ng-model	|expression	|Yes  |none    |Assignable angular expression to which to data-bind the low value. |

|ng-model-range|expression|Yes|none    |Assignable angular expression to which to data-bind the high value. |

|floor      |float  |Yes      |none    |The lowest value possible |

|ceiling    |float  |Yes      |none    |The highest value possible |

|buffer		|float	|No		  |0	   |The minimum difference between the low and high values |

|step       |float  |No       |inf     |The width between each tick. |

|precision  |integer|No       |0       |The numerical precision to which to round the value. |

|stretch    |float  |No       |3       |How sticky the knobs will act. 1 = no stickiness |

|translate-fn|expression|No	  |none	   |A translation function to apply to most of the view values. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()") |

|translate-range-fn|expression|No|none |A translation function to apply to the range value. Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()") |

|translate-combined-fn|expression|No|none|A translation function to apply to the combined value (when the knobs are too close together). Be sure to omit the parentheses (e.g. "transFunc" instead of "transFunc()") |

|scale-fn   |expression|No	  |none    |A scaling function to apply to the value. See the `Scaling` section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()") |

|inverse-scale-fn|expression|No|none   |The inverse of the scaling function. This is required if a scaling function is specified. See the `Scaling` section below for more details. Be sure to omit the parentheses (e.g. "scaleFunc" instead of "scaleFunc()") |



## Scaling

You can supply any arbitrary scaling function (and its inverse) to the slider to suit your needs. 

The inverse scaling function MUST be specified if a scaling function is specified (and vice versa).

The scaling/inverse function can be pretty much anything as long as they take a number as a parameter and return a number. Like this:

```javascript

function scaleFn(value) {

    return Math.pow(value,3);

}

function inverseScaleFn(value) {

	var sign = (value == 0) ? 1 : (value/Math.abs(value));

    return sign * Math.pow(Math.abs(value),1/3);

}

```

A few notes:

- scaleFn(inverseScaleFn(x)) MUST produce x or you're gonna have a bad time

- If your scale function returns the same y for multiple x's within the range of the slider you're gonna have a bad time

- If the floor of your slider dips into negative numbers and you don't account for possible imaginary numbers you're gonna have a bad time



## Additional Features

- `ngChange` support ([docs](http://docs.angularjs.org/api/ng/directive/ngChange))

- `ngDisabled` support ([docs](http://docs.angularjs.org/api/ng/directive/ngDisabled))

- implements `ngModelController` for form validation and dirty/pristine states ([docs](http://docs.angularjs.org/api/ng/type/ngModel.NgModelController))



## Development



Run `npm install`, then `bower install` and then `npm run dev` for continuously running the tests in PhantomJS whilst developing.