noUiSlider 是一个轻量级而功能强大的 JavaScript 滑块库，它允许你创建并定制漂亮的滑块和范围选择器。通过 npm 安装 noUiSlider，你可以快速轻松地在你的前端项目中使用它。
安装 noUiSlider
使用 npm 安装 noUiSlider：
npm install nouislider --save
安装完成后，在你的项目中引入 noUiSlider：
import noUiSlider from 'nouislider';
基本使用方法
下面是一个基本的 noUiSlider 示例，在一个 div 元素中创建一个水平滑块，并将其值显示在一个输入框中：
-- -------------------- ---- -------
---- ------------------
------ ------------- ------------------
--------
----- ------ - ----------------------------------
----- ----- - ----------------------------------------
------------------------- -
------ ---
-------- ------ -------
------ -
---- --
---- ---
-
---
------------------------------ -------- ------- -- -
----------- - ---------------
---
---------上面的代码中，我们首先在 HTML 中创建了一个 div 元素作为滑块的容器，并创建了一个用于显示滑块值的输入框。然后，我们使用 noUiSlider.create() 方法创建一个水平滑块，并将其绑定到 slider 元素上。通过设置 start、connect 和 range 属性，我们定义了滑块的初始值、是否使用连线以及取值范围。
最后，在滑块值发生变化时，我们使用 slider.noUiSlider.on() 方法监听 update 事件，并将滑块值更新到输入框中。
高级用法
noUiSlider 提供了丰富的选项和方法，可以让你轻松地创建各种类型的滑块和范围选择器。下面是一些高级用法示例：
垂直滑块
-- -------------------- ---- -------
---- ------------------
--------
----- ------ - ----------------------------------
------------------------- -
------ ---
------------ -----------
------ -
---- --
---- ---
-
---
---------在上面的代码中，我们将滑块的方向设置为垂直方向，只需要在创建滑块时指定 orientation 属性为 'vertical' 即可。
范围选择器
-- -------------------- ---- -------
---- ------------------
--------
----- ------ - ----------------------------------
------------------------- -
------ ---- ----
-------- -----
------ -
---- --
---- ---
-
---
---------在上面的代码中，我们将滑块的初始值设置为一个数组，以创建一个范围选择器。通过设置 connect 属性为 true，我们将两个滑块连接起来，形成一个范围选择器。
自定义样式
noUiSlider 允许你自定义滑块的样式，包括滑块、连线和背景等。可以使用 CSS 样式来修改默认的样式，或者通过 JavaScript 代码来动态添加样式。下面是一个示例：
-- -------------------- ---- -------
---- ------------------
-------
------------ -
----------------- --------
-
------------- -
----------------- --------- --- --- -----
-
--------
--------
----- ------ - ----------------------------------
------------------------- -
------ ---- ----
-------- -----
------ -
---- --
---- ---
-
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------