简介
multipleable-slider 是一个基于原生 JavaScript 开发的轻量级多样式滑动组件，支持自定义样式，以及多个滑动条同时操作。本文将介绍如何在前端项目中使用 multipleable-slider，详细讲解其 API 和实现原理。
安装
通过 npm 安装 multipleable-slider：
npm install multipleable-slider
在项目中引入：
<link rel="stylesheet" href="./node_modules/multipleable-slider/dist/multipleable-slider.css"> <script src="./node_modules/multipleable-slider/dist/multipleable-slider.min.js"></script>
使用方法
HTML 结构
<div class="multipleable-slider"> <div class="multipleable-slider__rail"></div> <div class="multipleable-slider__thumb"></div> <div class="multipleable-slider__thumb"></div> <div class="multipleable-slider__thumb"></div> </div>
其中，.multipleable-slider 为组件容器，.multipleable-slider__rail 为滑动条轨道，.multipleable-slider__thumb 为滑块。可以通过增加 .multipleable-slider__thumb 元素来增加滑块数量。
JavaScript 初始化
const slider = new MultipleableSlider('.multipleable-slider', {
value: [50, 70, 90],
min: 0,
max: 100,
step: 10,
orientation: 'horizontal',
tooltip: true
});通过传入 .multipleable-slider 选择器和配置项对象，初始化 multipleable-slider。
API
getValue()
获取当前滑块的值。返回一个数组，数组长度为滑块数量。
console.log(slider.getValue()); // [50, 70, 90]
setValue(value)
设置滑块的值。value 参数为一个数组，数组长度应等于滑块数量。
slider.setValue([40, 60, 80]);
on('change', callback)
当滑块的值发生改变时，调用回调函数。callback 参数为一个函数。可以多次调用此函数，注册多个回调函数。
slider.on('change', () => {
console.log(slider.getValue());
});可用配置项
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
min |
Number |
0 |
滑块最小值。 |
max |
Number |
100 |
滑块最大值。 |
step |
Number |
1 |
滑块步长。 |
value |
Array |
[] |
初始值。应为一个数组，数组长度等于滑块数量。 |
orientation |
String |
horizontal |
滑块的方向。可选值为 'horizontal' 和 'vertical'。 |
tooltip |
Boolean |
false |
是否显示提示框。 |
railStyle |
Object |
{} |
滑动轨道的样式。格式为一个对象，key 为属性名，value 为属性值。如 { backgroundColor: 'red', height: '4px' }。 |
thumbStyle |
Object |
{} |
滑块的样式。格式为一个对象，key 为属性名，value 为属性值。如 { backgroundColor: 'blue', width: '20px' }。 |
实现原理
multipleable-slider 的原理很简单：用 CSS 做样式，用 JavaScript 处理交互。它通过监听鼠标或触摸事件，计算滑块的位置，更新 UI 并派发 change 事件。
-- -------------------- ---- -------
----- ------------------ -
--------------------- -------- -
-- -------
------------ - ----------------- --------------------- ---------
-------------
--------------------------
-
------- -
-- -- --- -----------
-
-------------------- -
-- -----------
-
------------------- ------ -
-- ----------
-
---------------------------- -
-- ------------
-
------------------------------- -
-- ------------
-
------------- -
-- -- ------ -----
-
-示例代码
下面是一个完整的 multipleable-slider 示例：
-- -------------------- ---- -------
--------- -----
------
------
------------------- ------ ------------
----- ---------------- ---------------------------------------------------------------------- --
-------
----------------- -
------- ----- -----
------ ----
-
------------- -
----------- -----
-
--------
-------
------
---- -------------------------
---- ----------------------------------
---- --------------------------- ----- ----------------------------------
------
------- ----------------------------------------------------------------------------------
--------
----- --------------- - -----------------------------------------------
----- ---------------- - ----------------------------------------
----- ------ - --- ----------------------------------- -
------ ---- --- ----
---- --
---- ----
----- ---
------------ -------------
-------- ----
---
------------------- -- -- -
----- ----- - ------------------
-------------------------- - ------------- ---
---
---------
-------
-------运行效果如下：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572d481e8991b448e9098