Ember-cli-elessar
This is a wrapper for the elessar slider plugin to work with Ember CLI.
Installation
From inside your ember-cli project, run the following:
ember install ember-cli-elessar
Usage
Options for component
values: // array of value pairs; each pair is the min and max of the range it creates readonly: false // whether this bar is read-only min: 0 // value at start of bar max: 100 // value at end of bar { // formats a value on the bar for output return a; } { // parses an output value for the bar return a; } snap: 0 // clamps range ends to multiples of this value (in bar units) minSize: 0 // smallest allowed range (in bar units) maxRanges: 3 // maximum number of ranges allowed on the bar bgMarks: count: 0 // number of value labels to write in the background of the bar interval: Infinity // provide instead of count to specify the space between labels label: '' { // string or function to write as the text of a label. functions are called with normalised values. return + ' - ' + ; } indicator: null // pass a function(RangeBar, Indicator, Function?) Value to calculate where to put a current indicator, calling the function whenever you want the position to be recalculated allowDelete: false // set to true to enable double-middle-click-to-delete deleteTimeout: 5000 // maximum time in ms between middle clicks vertical: false // if true the rangebar is aligned vertically, and given the class elessar-vertical bounds: null // a function that provides an upper or lower bound when a range is being dragged. call with the range that is being moved, should return an object with an upper or lower key htmlLabel: false // if true, range labels are written as html allowSwap: true // swap ranges when dragging past barClass: null // special css selector for bar rangeClass: null // special css selector for range bindModel: false // bind model to range, special way to add ranges (manual)
Usage in Template
elessar-range values=model bindModel=true snap=1 onChange=action "onChangeCtrl" onChanging=action "onChangingCtrl" rangeClass="dummy-range" barClass="dummy-bar"
Example with binding
If the option bindModel is set to true the ranges will be created with the model attached
The model needs an attribute "range" which shows the range as array [10, 20]
To attach the model to newly created ranges => check this example
{ var _this = this; rangeBarranges; }
Compatibility
- Ember.js v2.18 or above
- Ember CLI v2.13 or above
Installation
ember install my-addon
Usage
[Longer description of how to use the addon in apps.]
License
This project is licensed under the MIT License.