Диапазон слайдеров Angular 2 - добавление библиотеки Ion.RangeSlider

Question

Я видел эту библиотеку, которая имеет функцию диапазона ползунка, но в AngularJS: Ion.RangeSlider

И есть парень, который делает оболочку для работы в Angular 2: ng2-ion-range-slider

я использую webpack не Angular-Cli,

Я пытался следовать его инструкциям по установке, и это работает, но без стилей.

Может ли кто-нибудь помочь мне выяснить, где поместить пути стилей в веб-пакете?

Answer 1

Я сделал это после нескольких неудачных попыток.

Во-первых, я использую Angular 5 с Webpack а также Angular Material,

1) добавить библиотеку слайдера и его оболочку в package.json файл.

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

2) Я добавил стили слайдера в 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';

добавить стиль, который вам нужен, зависит от выбранного вами скина.

3) Нет необходимости импортировать javascript файл в webpackЯ имею в виду эти два файла:

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

4) Импорт IonRangeSliderModule в вашем AppModule,

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

Теперь вы можете использовать его как:

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

---

Обновить

Для тех, кто не использует угловой материал

Вы можете импортировать css а также scss файл внутри webpack конфигурационный файл.

1-) Установить sass-loader библиотека:

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

2-) Создать новый scss файл внутри проекта с любым именем (напр. ./src/index.scss) и добавить все css а также scss Вы хотите импортировать в этот файл.

3-) Внутри webpack.common.js файл, добавьте это в правила или измените его, если он существует:

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