Angular 2 slider ranges - add Ion.RangeSlider library
I saw this library with slider function, but in AngularJS: Ion.RangeSlider
And there is a guy making a wrapper to work in Angular 2: ng2-ion-range-slider
I am using webpack
not Angular-Cli
.
I tried following its installation instructions and it works, but no styles.
Can anyone help me figure out where to put style paths in webpack?
source to share
I did this after some unsuccessful attempts.
First, I use Angular 5
with Webpack
and Angular Material
.
1) add the slider library and its wrapper to the file package.json
.
"ion-rangeslider": "2.2.0"
"ng2-ion-range-slider": "~1.0.3"
2) I added slider styles to a file theme.scss
inside my project, for example:
@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) No need to import the file javascript
into Webpack
, I mean these two files:
jquery/dist/jquery.min.js ion-rangeslider/js/ion.rangeSlider.js
4) Import IonRangeSliderModule
to 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>
Refresh
For those who don't use Angular Material
You can import files css
and scss
the configuration file Webpack
.
1-) Install the library sass-loader
:
"sass-loader": "^6.0.3",
"sass-resources-loader": "^1.3.3",
2-) Create a new scss
file inside the project with any name (example ./src/index.scss
) and add all css
and scss
that you want to import into this file.
3-) Inside the file, webpack.common.js
add this to the rules or change it if exists:
/**
* 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')]
},
source to share