Ion Range Slider for AngularJS 2
npm install ng2-ion-range-sliderFor Demos and sample usage of this package have a look at the example folder
```
git clone git@github.com:PhilippStein/ng2-ion-range-slider.git
cd ng2-ion-range-slider/example
npm install
npm start
npm install ng2-ion-range-slider --save
`#### Setup scripts and styles
If you use angular-cli, add
jquery and ion-range-slider to the scripts section of .angular-cli.jso
`
{
...
"apps": [
{
...
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"
],
...
`Also add the ion-range-slider style and skin css to the styles section in your
.angular-cli.jso
`
{
...
"apps": [
{
...
"styles": [
"../node_modules/ion-rangeslider/css/ion.rangeSlider.css",
"../node_modules/ion-rangeslider/css/ion.rangeSlider.skinFlat.css"
],
...
`#### Import IonRangeSliderModule
import the
IonRangeSliderModule in your application module` javascript
import { IonRangeSliderModule } from "ng2-ion-range-slider";@NgModule({
imports: [IonRangeSliderModule]
})
`
#### Use the ion-range-slider
Use the ion-range-slider directive in your component.` html
type="double"
[min]="myMinVar"
max="100"
from="28"
from_min="10"
from_max="30"
from_shadow="true"
to="40"
to_min="40"
to_max="90"
to_shadow="true"
grid="true"
grid_num="10"
prefix="Weight: "
postfix=" million pounds"
decorate_both="false"
(onUpdate)="myOnUpdate($event)"
(onChange)="myOnChange($event)"
(onFinish)="myOnFinish($event)">
``