jQRangeSlider 是一个基于 jQuery 的开源、可定制和易于使用的范围滑块插件。它可以用于创建带有两个手柄的范围输入框，适用于选择价格、时间等连续区间的场景。
安装
使用 npm 进行安装：
--- ------- ---------------
使用方法
引入
在 HTML 文件中引入 jQRangeSlider 的 CSS 和 JavaScript 文件：
----- ---------------- ----------------------------------------------------------------- ------- ------------------------------------------------------------------------
配置
使用以下代码初始化 jQRangeSlider：
------------------------- ------- - ---- -- ---- --- -- -------------- - ---- --- ---- -- -- ----- -- ------ ---- ---
其中 #range 是要应用范围滑块的元素的 ID。配置选项包括：
bounds: 确定滑块的最小值和最大值。defaultValues: 初始时手柄所在位置的值。step: 步进值。range: 如果为true，则显示两个手柄；否则只显示一个手柄。
更多配置选项请参考官方文档。
方法
jQRangeSlider 提供了一些方法，可以在代码中调用：
-- ---------- ------------------------------------- -- -------- ------------------------------------ --- ---- -- ---- -----------------------------------
事件
jQRangeSlider 还提供了一些事件，可以在用户操作范围滑块时触发：
--------------------------------- ----------- ----- - ----------------- - - --------------- - -- ---- - - ----------------- ---
事件包括：
valuesChanging: 手柄位置正在变化时触发。valuesChanged: 手柄位置变化结束后触发。
更多事件请参考官方文档。
示例代码
以下是一个简单示例：
--------- -----
------
------
----- ----------------
-------------------- ------------
----- ---------------- -----------------------------------------------------------------
-------
------
---- -----------------
------- ------------------------------------------------------
------- ------------------------------------------------------------------------
--------
-------------------------
------- - ---- -- ---- --- --
-------------- - ---- --- ---- -- --
----- --
------ ----
---
---------
-------
-------这个示例创建一个带有两个手柄的范围滑块，最小值为 0，最大值为 100，初始时左侧手柄的位置为 20，右侧手柄的位置为 80。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/35935