前言
对于前端开发者来说，常常需要对页面中的一些元素进行交互，如使用滑块输入一个值。而 noUiSlider 是一个轻量级的 JavaScript 插件，可用于创建高度可定制和可响应的滑块。在基于 Angular 的项目中，可以使用 npm 包 ng2-nouislider-prot 轻松地集成 noUiSlider。
安装
可以使用 npm 安装该包：
npm install ng2-nouislider-prot --save
使用示例
在使用该 npm 包前，需要先安装 noUiSlider 的样式表和 JavaScript 文件。可以在 HTML 文件中添加如下代码：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.1/nouislider.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/14.7.1/nouislider.min.js"></script>
然后可以在 Angular 组件中引入该组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------- - ---- -------------
------------
--------- -------------
--------- -
---- --------------------------- --------------------------------
-------------- ------ -- ----------- ---------
--
--
------ ----- --------------- -
------------ ------ - ----
------------- ------- - -
------ ------
------ -
---- --
---- ----
--
--
-上述代码中，组件模板中使用了 [nouislider] 指令来创建一个 noUiSlider，sliderConfig 是一个配置对象，用于设置 noUiSlider 的一些选项。可以将其作为 [nouislider] 指令的参数传入，也可以在组件代码中动态修改。
[(ngModel)]="sliderValue" 表示将滑块的当前值绑定到组件的 sliderValue 属性上，而 {{ sliderValue }} 则用于实时展示当前选择的值。
配置选项
noUiSlider 的配置选项非常丰富，可以通过 Options 接口中的属性进行设置。下面列出了一些常用的选项：
start：初始化时滑块的起始值。可以是单个数字或一个数组，多个滑块时使用数组。step：滑块的步进值。range：滑块可取值的范围。orientation：滑块方向。可以是水平或垂直。direction：如果滑块方向为垂直，则此选项可以设置滑块的方向。behaviour：滑块的行为模式。可以是拖拽或单击。connect：多个滑块连在一起时，设置为true则它们之间会连线。
结语
通过 ng2-nouislider-prot 包，使用 noUiSlider 可以变得非常简单。只需使用 [nouislider] 指令和 Options 配置对象，就可以创建定制化的滑块元素，为用户提供更好的交互体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600569c381e8991b448e4ea8