前言
html5 是一个不断发展的技术，相较于 Flash 和 Java 方案，html5 相对更加开放、快捷和安全。而 html5 的滑动条（Slider）控件，其实也被很多前端开发者所使用。本文将介绍如何使用 npm 包 html5-slider 创建滑动条。
安装
安装这个 npm 包，只需要在命令行中输入以下命令即可：
npm install html5-slider
基本用法
html5-slider 是一个非常简单的包，它只有一个类 Slider。使用这个类，我们可以轻松地创建一个基本的滑动条。
-- -------------------- ---- -------
--------- -----
------
------
------------------- ----------
-------
------
---- ---------------------
------- -------------------------------------------------------
--------
--- ------ - --- ---------------------------------------------
---------
-------
-------上面的代码会在一个空的 DIV 容器中创建一个 Slider。Slider 的宽度和高度都是默认的，也可以自己指定。
渲染值
Slider 的 value 有四种可选值: none、bubble、meter 和 marker。我们可以通过示例代码看一下渲染的效果。
-- -------------------- ---- -------
--------- -----
------
------
------------------- ----------
-------
------
---- ---------------------
------- -------------------------------------------------------
--------
--- ------- - --- -------------------------------------------- -
------ ------
---
--- ------- - --- -------------------------------------------- -
------ --------
---
--- ------- - --- -------------------------------------------- -
------ -------
---
--- ------- - --- -------------------------------------------- -
------ --------
---
---------
-------
-------定制
如果你想要定制 Slider 的样式，那么 html5-slider 也提供了一些常用的选项。以下是一些常用的选项。
-- -------------------- ---- ------- -- ---- --- ------ - --- -------------------------------------------- - ---- -- ---- ---- ----- -- ------ --------- ---------- -- -- ------ --- ------------ ------------- ---------- ------ --------- ------ -- ------- --- ------ -------- ------ ---------- ---------- ---- ---- ------ -------- ------ -- ---- ---------- ----- --------- ------ -- ---- -------- ------ --------- ------ --------- ----- ---
结语
html5-slider 虽然不是很复杂，但它对于很多前端爱好者来说，都是一件非常实用的工具。如果你在项目中需要用到滑动条控件，不妨试试 html5-slider，相信它可以满足你的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005662f81e8991b448e213d