Ember-cli-ion-rangeslider
An Ember and ion.RangeSlider integration, packaged as an Ember-cli addon. Check ion.RangeSlider and Ember-cli.
Browser Support
Should run wherever Ember and ion.RangeSlider run.
Installation
As an Ember CLI addon (0.1.5 or later)
In your ember-cli project run
ember install:addon ember-cli-ion-rangeslider
As an Ember CLI addon (prior to 0.1.5)
In your ember-cli project run
npm install --save-dev ember-cli-ion-rangesliderember g ember-cli-ion-rangeslider
As a Standalone Library
Download a release. Copy to your vendor directory and link up the .js file.
Usage
This addon provides an ember-ion-rangeslider component.
{{ember-ion-rangeslider type="double" grid=true min=1 max=100 step=1 from=fromItem to=toItem}}
Properties
Please review ion.RangeSlider docs and demos
-
to
,from
- Bound via two-way data binding. -
updateTrigger
- Tells Ember-ion-rangeslider how the data-boundto
andfrom
will be updating while the user drags the slider. There are two possible values [change
,finish
].finish
the default option, and will update the underlying to/from binding source once the user releases a handle.change
will update the underlying to/from at minimum athrottleTimeout
.
-
throttleTimeout
- Used withupdateTrigger="change"
. It throttles the slider's updates to the bound fields. The default value is50
milliseconds. -
type
,values
,min
,max
,step
,force_edges
,keyboard
,keyboard_step
,grid
,grid_margin
,grid_num
,grid_snap
,hide_min_max
,hide_from_to
,prefix
,postfix
,max_postfix
,decorate_both
,values_separator
,disabled
- Each of these properties is bound to the ion.RangeSlider via one-way data binding (i.e. updating the binding target when binding source changes), so that when any of the bound properties change the slider will reflect that state.
Skin customization
You can customize which skin to use in your Brocfile.
//your-app/Brocfile.js var EmberApp = ; var app = 'ember-cli-ion-rangeslider': // valid values are `nice`, `modern`, 'html5', 'flat`, `simple` or false skin: 'html5' //default `nice` ; moduleexports = app;
If you want to use the default skin (i.e. nice
), you don't need to specify any options or even modify your existing EmberApp. If you don't want to use any of the available skins, simply assign false or any "falsy" value to the skin option and no skin including the related assets (css styles & sprites) will be used.
ion.rangeSlider.css
- is merged and bundled with your /assets/vendor.css
, regardless of the defined options.
This style defines a bare minimum required to view and interact with ion.rangeSlider.
Running
ember serve
Visit your app at http://localhost:4200.
Running Tests
ember testember test --server
Building
ember build
For more information on using ember-cli, visit http://www.ember-cli.com/