Plage de curseurs angulars 2 – Ajout de la bibliothèque Ion.RangeSlider

J’ai vu cette bibliothèque qui possède une fonction de plage de curseur, mais dans AngularJS: Ion.RangeSlider

Et il y a un gars qui fabrique une enveloppe pour que cela fonctionne dans Angular 2: ng2-ion-range-slider

J’utilise webpack pas Angular-Cli .

J’ai essayé de suivre ses instructions d’installation et il est travaillé mais sans styles.

Quelqu’un peut-il m’aider à savoir où placer les chemins de style dans Webpack?

Je l’ai fait après quelques tentatives infructueuses.

Premièrement, j’utilise Angular 5 avec Webpack et Angular Material .

1) ajoutez la bibliothèque de curseurs et son wrapper au fichier package.json .

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

2) J’ai ajouté les styles de curseur au fichier theme.scss dans mon projet, comme theme.scss :

 @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'; 

append le style dont vous avez besoin dépend de la peau que vous choisissez.

3) Il n’est pas nécessaire d’importer un fichier javascript dans webpack , je veux dire ces deux fichiers:

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

4) Importez IonRangeSliderModule dans votre AppModule .

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

Maintenant, vous pouvez l’utiliser comme:

   

Mettre à jour

Pour ceux qui n’utilisent pas de matériau angular

Vous pouvez importer les fichiers css et scss dans le fichier de configuration de webpack .

1-) Installer la bibliothèque sass-loader :

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

2-) Créez un nouveau fichier scss dans le projet avec n’importe quel nom (ex. ./src/index.scss ) et ajoutez tous les css et scss à importer dans ce fichier.

3-) Dans le fichier webpack.common.js , ajoutez ceci aux règles ou modifiez-le s’il existe:

 /** * To ssortingng and sass loader support for *.scss files (from Angular components) * Returns comstackd css content as ssortingng * */ { test: /\.scss$/, use: ['to-ssortingng-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')] },