# angular-slider [](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 `<script>`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"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-touch.min.js"></script> <script src="build/angular-slider.min.js"></script> ``` 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 <slider ng-model="{expression}" floor="{float}" ceiling="{float}" step="{float}" precision="{integer}" stretch="{integer}" translate-fn="{expression}" scale-fn="{expression}" inverse-scale-fn="{expression}"> </slider> ``` As an attribute: ```html <div slider ng-model="{expression}" floor="{float}" ceiling="{float}" step="{float}" precision="{integer}" stretch="{integer}" translate-fn="{expression}" scale-fn="{expression}" inverse-scale-fn="{expression}"> </div> ``` #### 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 <slider ng-model="{expression}" ng-model-range="{expression}" floor="{float}" ceiling="{float}" buffer="{float}" step="{float}" precision="{integer}" stretch="{integer}" translate-fn="{expression}" translate-range-fn="{expression}" translate-combined-fn="{expression}" scale-fn="{expression}" inverse-scale-fn="{expression}"> </slider> ``` As an attribute: ```html <div slider ng-model="{expression}" ng-model-range="{expression}" floor="{float}" ceiling="{float}" buffer="{float}" step="{float}" precision="{integer}" stretch="{integer}" translate-fn="{expression}" translate-range-fn="{expression}" translate-combined-fn="{expression}" scale-fn="{expression}" inverse-scale-fn="{expression}"> </div> ``` #### 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.