ng2-ion-range-slider

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

Demos and Sample Usage

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

Installation

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.json

{
  ...
  "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.json

{
  ...
  "apps": [
    {
      ...
      "styles": [
              "../node_modules/ion-rangeslider/css/ion.rangeSlider.min.css"
      ],
      ...

Import IonRangeSliderModule

import the IonRangeSliderModule in your application module

import { IonRangeSliderModule } from "ng2-ion-range-slider";

@NgModule({
    imports: [IonRangeSliderModule]
})

Use the ion-range-slider

Use the ion-range-slider directive in your component.

<ion-range-slider #sliderElement
          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)"></ion-range-slider>