Angular 2 slider range - Add Ion.RangeSlider library

问题

I have seen this library that have a slider range feature but in AngularJS: Ion.RangeSlider

And there is a guy make a wrapper for it to work in Angular 2: ng2-ion-range-slider

I am using webpack not Angular-Cli.

I have tried to follow his install instructions and it is worked but with no styles.

Can anyone help me to find out where to put the style paths in webpack?

回答1:

I have make it after some failed attempts.

First, I am using Angular 5 with Webpack and Angular Material.

1) add the slider library and its wrapper to package.json file.

"ion-rangeslider": "2.2.0"
"ng2-ion-range-slider": "~1.0.3"

2) I have added the slider styles to theme.scss file inside my project, like this:

@import '~@angular/material/_theming.scss';
@import '~ion-rangeslider/css/ion.rangeSlider.css';
@import '~ion-rangeslider/css/ion.rangeSlider.skinModern.css';
// @import '~ion-rangeslider/css/ion.rangeSlider.skinFlat.css';

add the style you need depends on the skin you choose.

3) There is no need to import javascript file in webpack, I mean these two file:

jquery/dist/jquery.min.js
ion-rangeslider/js/ion.rangeSlider.js

4) Import IonRangeSliderModule in your AppModule.

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

Now, you can use it like:

<ion-range-slider type="double" [min]="min" [max]="max" [step]="step" [from]="value1" 
                  [to]="value2" (onFinish)="sliderChange($event)">
</ion-range-slider>

Update

For those don't use Angular Material

You can import css and scss file inside the webpack configuration file.

1-) Install sass-loader library:

"sass-loader": "^6.0.3",
"sass-resources-loader": "^1.3.3",

2-) Create new scss file inside the project with any name (Ex. ./src/index.scss) and add all the css and scss you want to import to this file.

3-) Inside webpack.common.js file, add this to rules or change it if exist:

/**
 * To string and sass loader support for *.scss files (from Angular components)
 * Returns compiled css content as string
 *
 */
{
  test: /\.scss$/,
  use: ['to-string-loader', 'css-loader', 'sass-loader',
    {
      loader: 'sass-resources-loader',
      options: {
        // Provide path to the file with resources
        resources: `./src/index.scss`
      },
    },
  ],
  exclude: [helpers.root('src', 'styles')]
},

来源：https://stackoverflow.com/questions/49128064/angular-2-slider-range-add-ion-rangeslider-library

标签

jquery

angular

Webpack

slider

angular-cli