在前端开发中，处理数值范围是一项经常性任务。为了方便地提供给开发者一个可定制的可视化控件，sunil-range-slider 是一个非常优秀的 npm 包。它是一个易于使用的、高度可定制的滑块组件，它的使用方法简单明了。
安装 sunil-range-slider
使用 npm 进行安装：
npm install sunil-range-slider --save
使用 sunil-range-slider
在你的 HTML 文件中，你需要引入以下依赖：
<link rel="stylesheet" href="node_modules/sunil-range-slider/dist/sunil-range-slider.css" /> <script src="node_modules/sunil-range-slider/dist/sunil-range-slider.js"></script>
然后，你可以在页面中添加一个 div 元素用于渲染滑块：
<div id="myRangeSlider"></div>
接下来，你需要在你的 JavaScript 文件中初始化 sunil-range-slider：
-- -------------------- ---- -------
--- ------ - --- -------------
------- ----------------
------- -
---- --
---- ----
----- --
----- ---
--- --
--
---------- -
-------- -------- -------- ------- ---
--------- -------- -------- ------- ---
--------- -------- -------- ------- ---
------ -------- -------- ------- --
--
-------- -
----- ---------
------------ -------------
---------- ------
--------- -----
---- -----
------ -----
----- -
-
---这里，我们使用 new RangeSlider() 创建一个新的对象，并传入 target、values、callbacks、options 这 4 个参数。它们各自指定了：
target: 渲染控件的目标元素 idvalues: 初始值min：可选择最小值max: 可选择最大值step: 步长from: 左滑块初始值to: 右滑块初始值（只在 type 为 double 时可用）
callbacks: 事件回调函数，分别在拖动开始、拖动中、拖动结束和数值变化后调用options: 配置项type: 可选值为'single'和'double'，单滑块或双滑块orientation: 可选值为'horizontal'和'vertical'，滑块方向direction: 可选值为'ltr'和'rtl'，左到右或右到左tooltips: 是否显示数值提示bar: 是否绘制范围条（只在 type 为 double 时可用）range: 是否选择数值范围（只在 type 为 double 时可用）step: 步长
事件回调
sunil-range-slider 提供了 4 个事件回调函数，它们可以用于响应以下行为：
- onStart: 当拖动开始时调用
- onChange: 当拖动进行时调用
- onUpdate: 当滑块数值更新时调用
- onEnd: 当拖动结束时调用
每个回调函数都可以传入两个参数：
values: 当前滑块数值，格式如下
{
from: 20, // 左侧滑块当前值
to?: 80 // 右侧滑块当前值（只在 type 为 double 时用到）
}handle: 拖动操作的滑块，值为'from'或'to'（只在 type 为 double 时用到）
例如：
onStart: function (values, handle) {
console.log(`开始拖动 ${handle} 滑块，当前值为 ${values[handle]}`);
}高度可定制
在 sunil-range-slider 中，你可以定制所有的样式效果，包括颜色、圆角大小、背景、间距等等。例如，你可以使用以下 CSS 修改滑块的颜色：
-- -------------------- ---- ------- -- --- -- ------- - ----------- ---- - -- ----- -- --------- - ----------- --------- -- -- ----- - -- -- -- ----------------- - ----------- ---- -
示例代码
完整的示例代码：（你可以使用 npm i && npm start 运行此示例）
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ------------
----- ---------------- ------------------------------------------------------------------ --
------ ----------------
---- -
-------- -----
-
----------- -
----------- -----
-------------- ----
------ -----
---------- -----
------------ ----
-------- --- ----
----------- -------
-
---------- -
----------- -----
------- -----
-------------- ----
----------- - --- --- ------- -- -- -----
------- -----
------ -----
-
----------------------- -
----------- -----
-
----------------- -
----------- -----
-------------- ----
-------- ---
-------- ------
------- -----
----- ----
------------ -----
----------- -----
--------- ---------
---- ----
------ -----
-
------- -
----------- -----
-------------- -----
------- ----
----------- -----
-
--------- -
----------- -----
-------------- -----
------- ----
---- -----
-
--------
-------
------
---- -------------------------
------- --------------------------------------------------------------------------
------- -----------------------
--- ------ - --- -------------
------- ----------------
------- -
---- --
---- ----
----- --
----- ---
--- --
--
---------- -
-------- -------- -------- ------- -
----------------- --------- ------- --------------------
--
--------- -------- -------- ------- -
----------------- --------- ------- --------------------
--
--------- -------- -------- ------- -
----------------- --------- ------ --------------------
--
------ -------- -------- ------- -
----------------- --------- ------- --------------------
-
--
-------- -
----- ---------
------------ -------------
---------- ------
--------- -----
---- -----
------ -----
----- -
-
---
---------
-------
-------总之，sunil-range-slider 是一个非常优秀的 npm 包，它的使用方法简单明了，非常适合前端范围选择功能场景。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557e781e8991b448d4f81