Angular 2 slider range - Add Ion.RangeSlider libra

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?

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')]
},