Angular 2滑块范围 - 添加Ion.RangeSlider库 [英] Angular 2 slider range - Add Ion.RangeSlider library

问题描述

我看过这个库有一个滑块范围功能但在AngularJS中：
Ion。 RangeSlider

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

还有一个人在Angular 2中使用包装器：
ng2-ion-range-slider

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

我正在使用 webpack 不是 Angular-Cli 。

我试过按照他的安装说明进行操作，但没有样式。

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

任何人都可以帮我找到在webpack中放置样式路径的位置吗？

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

推荐答案

尝试失败后我已经做好了。

I have make it after some failed attempts.

首先，我使用 Angular 5 与 Webpack 和 Angular Material 。

1）将滑块库及其包装器添加到 package.json 文件。

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）我已将滑块样式添加到 theme.scss 我的项目中的文件，如下所示：

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）无需在 javascript 文件> webpack ，我的意思是这两个文件：

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）导入 IonRangeSliderModule 在 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

对于那些不使用Angular Material的人

For those don't use Angular Material

你可以导入 css 和 scss webpack 配置文件中的文件。

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

1-）安装 sass-loader 库：

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

2-）在项目中使用任何名称创建新的 scss 文件（例如 ./ src / index.scss ）并添加所有 css 和 scss 你想导入这个文件。

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-）在 webpack.common.js 文件里面，加上这个规则或如果存在则更改它：

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

这篇关于Angular 2滑块范围 - 添加Ion.RangeSlider库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！