简介
@motardo/nouislider 是一个轻量级、可定制、支持移动手势的 JavaScript 滑块库。它可以适应各种需求并且易于使用。该库是基于 noUiSlider 的二次封装，使其更适用于项目实践。
安装
你可以通过 NPM 来安装 @motardo/nouislider ，在命令行中输入以下代码：
npm install @motardo/nouislider
使用方法
在以 vue 作为前端框架为例子：
首先，在你的 vue 页面中引入 @motardo/nouislider ：
import 'nouislider/dist/nouislider.css' import NouiSlider from '@motardo/nouislider'
接着，将引入的 NouiSlider 组件注册到 vue 页面中：
-- -------------------- ---- -------
------ ------- -
----------- -
----------
--
------ -
------ -
------ --- -----
-
-
-最后，在 vue 页面中编写 HTML 代码，使用 NouiSlider 组件：
<template>
<div>
<noui-slider v-model="range" :config="{ start: [100, 900], step: 5, connect: true }" />
</div>
</template>这个例子展示了如何使用 NouiSlider 组件来渲染一个选择范围的滑块。配置项 config 中可传递选项参数来进行不同样式的滑块使用。
参数配置
在 Vue 页面中，你可以通过 NouiSlider 组件的 config 属性来进行参数配置，参数配置如下：
-- -------------------- ---- -------
-
------ ---- ---- -- ----------------------
-------- ------ ------- -- ------------------------
----- --- -- --------------------
------ - ---- -- ---- --- -- -- -----------------
----- -
----- --------
-------- -
- -- -------------------
-以上仅列举了一些主要的参数配置，更多参数详细内容请参考官方文档。
事件
@motardo/nouislider 支持多种事件，以下列出了一些常用的：
change：滑块值发生改变时触发。start：滑块开始滑动时触发。end：滑块停止滑动时触发。update：滑块更新时触发。
可以通过向 NouiSlider 组件添加响应事件来获得所需的事件回调信息。
示例代码
-- -------------------- ---- -------
----------
-----
------------ --------------- ---------- ------ ----- ----- ----- -- -------- ---- -- ---------------------- --
----------- -------- -- - -- -------- ------
------
-----------
--------
------ --------------------------------
------ ---------- ---- ---------------------
------ ------- -
----------- -
----------
--
------ -
------ -
------ --- -----
-
--
-------- -
-------------------- ------- -
------------------- ------- -------
-
-
-
---------总结
@motardo/nouislider 是一个灵活、易用、可高度自定义的 JavaScript 滑块库。它支持多种参数配置和事件回调，可以适应多种需求场景。通过本文，你可以快速上手使用滑块库并且掌握其基础参数配置。欢迎读者在实际项目中尝试使用，体会其灵活性和实用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ad81e8991b448dfebd