简介
在前端开发中，我们经常需要使用到滑块（Range Input）这个控件，来实现用户选择某个值的功能。而 Bootstrap-range-input 是一个基于 Bootstrap 的滑块插件，它能够快速帮我们实现非常多样化的滑块控件，如单滑块、双滑块、步进值滑块等。
在使用 Bootstrap-range-input 之前，我们需要先安装它。这里我们使用 npm 来进行安装。
安装
使用以下命令来安装 Bootstrap-range-input ：
npm install bootstrap-range-input
安装完成后，我们可以在项目中的 node_modules 目录下找到 bootstrap-range-input 的文件。
使用
在使用之前，我们需要先引入 Bootstrap 的样式文件和 bootstrap-range-input 的样式文件：
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <link rel="stylesheet" href="node_modules/bootstrap-range-input/bootstrap-range-input.css">
然后，我们就可以在 HTML 中添加一个滑块控件了：
<div class="form-group"> <label for="range">Range Input:</label> <input type="range" id="range" name="range" class="form-control-range"> </div>
在添加滑块控件的过程中，需要注意以下几点：
- 为了让滑块与 Bootstrap 的样式保持一致，我们需要给 input 元素添加
form-control-range类。 - 如果需要添加 label 的话，需要将 label 元素放在 input 后面，并使用
for属性来与 input 元素建立关联关系。
除了单滑块之外，Bootstrap-range-input 还支持双滑块和步进值滑块。我们可以使用以下代码来实现：
双滑块
-- -------------------- ---- -------
---- -------------------
------ ------------------------- ----- --------------
------ ------------ ----------------- ------------------- --------------------------
------------------
------------
-------------------
--------------
-------------------
----------------
---------------
------在双滑块控件中，我们需要使用 data-type="double" 及其他标准 input 标签属性来设置滑块的最小值、最大值、起始值等。如果需要添加前置单位的话，可以使用 data-before 属性，后置单位使用 data-after 属性。
步进值滑块
-- -------------------- ---- -------
---- -------------------
------ --------------------- ----- --------------
------ ------------ --------------- ----------------- --------------------------
------------------
------------
-------------------
--------------
-------------------
--------------
----------------
---------------
------在步进值滑块控件中，我们同样需要使用 data-type="double" 及其他标准 input 标签属性来设置滑块的最小值、最大值、起始值等。不同的是，我们需额外设置 data-step 属性来设置滑块的步进值。
总结
Bootstrap-range-input 是一个非常方便的滑块插件，它提供了很多种滑块控件的样式及功能。同时，它也非常易用，只需要在页面中引入相应的 CSS 文件，并使用标准 input 标签即可。如果你正在做一些关于滑块控件的项目，不妨试试 Bootstrap-range-input 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c82ccdc64669dde4d3b