jQRangeSlider 是一个基于 jQuery 的开源、可定制和易于使用的范围滑块插件。它可以用于创建带有两个手柄的范围输入框，适用于选择价格、时间等连续区间的场景。
安装
使用 npm 进行安装：
npm install jq-range-slider
使用方法
引入
在 HTML 文件中引入 jQRangeSlider 的 CSS 和 JavaScript 文件：
<link rel="stylesheet" href="node_modules/jq-range-slider/dist/jq-range-slider.min.css"> <script src="node_modules/jq-range-slider/dist/jq-range-slider.min.js"></script>
配置
使用以下代码初始化 jQRangeSlider：
$("#range").rangeSlider({
bounds: { min: 0, max: 100 },
defaultValues: { min: 20, max: 80 },
step: 1,
range: true
});其中 #range 是要应用范围滑块的元素的 ID。配置选项包括：
bounds: 确定滑块的最小值和最大值。defaultValues: 初始时手柄所在位置的值。step: 步进值。range: 如果为true，则显示两个手柄；否则只显示一个手柄。
更多配置选项请参考官方文档。
方法
jQRangeSlider 提供了一些方法，可以在代码中调用：
// 获取当前手柄位置的值
$("#range").rangeSlider("getBounds");
// 设置手柄位置的值
$("#range").rangeSlider("setValues", 30, 70);
// 销毁插件
$("#range").rangeSlider("destroy");事件
jQRangeSlider 还提供了一些事件，可以在用户操作范围滑块时触发：
$("#range").bind("valuesChanged", function(e, data) {
console.log("Min: " + data.values.min + ", Max: " + data.values.max);
});事件包括：
valuesChanging: 手柄位置正在变化时触发。valuesChanged: 手柄位置变化结束后触发。
更多事件请参考官方文档。
示例代码
以下是一个简单示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ------------
----- ---------------- -----------------------------------------------------------------
-------
------
---- -----------------
------- ------------------------------------------------------
------- ------------------------------------------------------------------------
--------
-------------------------
------- - ---- -- ---- --- --
-------------- - ---- --- ---- -- --
----- --
------ ----
---
---------
-------
-------这个示例创建一个带有两个手柄的范围滑块，最小值为 0，最大值为 100，初始时左侧手柄的位置为 20，右侧手柄的位置为 80。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35935