简介
wsdm-range-slider 是一款基于 Web 加载的、能够网页中显示范围查询控件的 npm 包。wsdm-range-slider 提供了良好的用户体验和丰富的特性。它封装了许多功能，使得使用起来简单、直观、高效。
wsdm-range-slider 可以非常方便地添加到已经存在的 Web 项目中，无论是基于 HTML、CSS 和 JavaScript 的纯前端网页、还是基于 Node.js 后台服务和模板渲染的 Web 应用，都可以使用 npm 安装和使用 wsdm-range-slider 包。
本文的目的是介绍如何使用 wsdm-range-slider 来实现一个本地的范围查询控件，并提供样例代码作为参考。
安装 wsdm-range-slider
推荐通过 npm 安装 wsdm-range-slider：
npm install wsdm-range-slider
安装完成后，您就可以在代码中使用它了。
使用 wsdm-range-slider
wsdm-range-slider 提供了非常方便的接口。您可以通过 jQuery API 或者普通的 JavaScript 方法来使用它。
现在假设您已经安装了 wsdm-range-slider，那么接下来就可以使用它了。以下是一个简单的例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------------------
------- ------------------------------------------------------------------------
------- ------------------------------------------------------------------------------
----- ---------------- ---------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------
----- ---------------- ----------------------------------------------------------------
-------
------
---- -------------------------
------ ---------------- ----------- ------------------ ---------
------
--------
------------ -
-------------------------------
------ -----
---- --
---- ----
------- ---- ----
------ --------------- --- -
---------------------------------- - - - - - --------------
-
---
------------------------------------------------------------- -- -
- - - - --------------------------------------- ----
---
---------
-------
-------上述代码包含了必须要引入的外部文件，包括 jQuery 、jQuery UI 库、wsdm-range-slider 的 CSS 和 JS 文件。
其中，#range-input 是用来显示范围值的输入框，它的值会随着滑动的变化而发生改变。
参数详解
wsdm-range-slider 接收到的参数包括以下选项：
| 选项 | 描述 |
|---|---|
| min | 控制滑动条的最小值。 |
| max | 控制滑动条的最大值。 |
| step | 控制滑动条的步长。 |
| values | 控制滑动条的初始取值。 |
| range | 控制是否为范围选择器。 |
| disabled | 控制是否可用。 |
| animate | 控制是否有滑块动画。 |
| orientation | 控制滑块方向。 |
| area | 控制滑块选择区域。 |
| showHistogram | 控制是否展示直方图。 |
| showValues | 控制是否展示滑块区间的取值。 |
结语
通过本文的学习，您应该已经了解了 wsdm-range-slider 的基本使用，及其参数的含义。通过实践，您会发现 wsdm-range-slider 可以让您的页面拥有更佳的交互性和用户友好性。如果您想要更多的帮助，可以去 wsdm-range-slider 官网查看其 API 文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671178dd3466f61ffe6a6