ng2-ion-range-slider

ng2-ion-range-slider

Ion Range Slider now optimized for easy use as an importable Angular 2 Module and installable using npm.

$3

For 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
`

$3


`
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)">
``