jQuery UI 是基于 jQuery 建立的一套 UI 组件库，其中包含 jQuery UI Slider。这个 Slider 组件非常常用，使用它可以创建可拖拽的滑动条，用于选择范围或数值。本篇文章将为大家介绍如何使用 npm 包 jquery-ui-slider，以及如何在前端项目中使用此组件。
安装
jquery-ui-slider 是一个 NPM 组件，安装非常简单，只需在命令行中执行如下命令即可：
npm install jquery-ui-slider
安装完成后，在你的项目中引入 jQuery 和 jQuery UI 的脚本文件。
使用教程
下面我们来看一下如何使用 jquery-ui-slider。
首先，在 HTML 文件中插入一个 div 元素，用于放置 Slider 组件：
<div id="slider"></div>
然后，在 JavaScript 文件中初始化 Slider：
-- -------------------- ---- -------
---------------------
---- --
---- ----
------ ---
------ --------------- --- -
-- - ------ --------
----------------------
-
---上述代码中，min、max 和 value 分别代表 Slider 的最小值、最大值和初始值。slide 函数是当 Slider 改变时触发的回调函数，其中的 ui.value 是当前 Slider 的值。
当然，还可以在 Slider 上添加其他属性，如 step、range 等，具体可以参考 jQuery UI 官方文档。
示例代码
下面是一个完整的 jquery-ui-slider 示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------------- ----------
---- -- ------ - ------ -- ---- ---
------- -----------------------------------------------------------
------- ------------------------------------------------------------------
----- ---------------- -------------------------------------------------------------------
-------
------
---- ---- ------ - --- -- ---
---- ------------------
--------
------------ -
---------------------
---- --
---- ----
------ ---
------ --------------- --- -
----------------------
-
---
---
---------
-------
-------结语
本篇文章向大家介绍了如何使用 npm 包 jquery-ui-slider，以及在前端项目中使用该组件，让大家能够更好的使用 Slider 组件。当然，除了 Slider，jQuery UI 还包含了其他非常实用的组件，建议大家去官网查看并学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedba4db5cbfe1ea06118df