角度2滑块范围-添加。范围滑块库

经过几次失败的尝试,我终于成功了。

首先,我正在使用 Angular 5 具有 Webpack 和 Angular Material 。

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

   “离子范围滑块”:“2.2.0” “ng2离子范围滑块”:“~ 1.0.3”

2. 我已将滑块样式添加到 theme.scss 我的项目中的文件,如下所示:

   @导入“~@角度/材质/\u主题”。scss’; @导入“~离子范围滑块/css/离子”。范围滑块。css’; @导入“~离子范围滑块/css/离子”。范围滑块。skinModern。css’; //@import“~离子范围滑块/css/ion。范围滑块。皮肤扁平。css’;

根据您选择的皮肤添加您需要的样式。

3. 无需导入 javascript 文件位于 webpack ,我指的是这两个文件:

   jquery/dist/jquery。最小js 离子范围滑块/js/离子。范围滑块。js公司

4. 进口 IonRangeSliderModule 在您的 AppModule 。

   从“ng2离子范围滑块”导入{IonRangeSliderModule};

现在,您可以像这样使用它:

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

使现代化

对于那些不使用棱角材料的

您可以导入 css 和 scss 中的文件 网页包 配置文件。

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