引言
Bootstrap-slider 是一个基于 bootstrap 的跨浏览器的拖动条控件，可以帮助我们在前端页面中快速添加滑动条的功能。用它可以方便的实现音乐播放器进度条、网站背景图的滑动变化、滑动型分页的效果等。在我们平时的开发中，滑动条控件已经变得越来越普遍，目前的前端框架或库中都已经包含了相应组件或控件。
在本文中，我们想要介绍的是一种可以快速使用的表示滑动条的 npm 包 michiweber.boostrap-slider。本文将从以下几个方面入手，详细讲解 npm 包的使用方法，并给出相应的 demo，希望能够帮助大家熟练掌握其使用技巧。
安装npm 包 michiweber.bootstrap-slider
我们可以通过 npm 在我们的项目中将 michiweber.bootstrap-slider 安装一下。在命令行中输入以下命令即可完成安装：
--- ------- ---------------------------
核心类库：jQuery和Bootstrap
由于 Bootstrap-slider 是基于 bootstrap 的，因此 Bootstrap 和 jQuery 库必须事先被引用到您的文件中。
这里我们引用最新的 bootstap 和 jQuery ，这里是代码：
--------- -----
------
------
---------------- --------------
----- ----------------
---- -- ------ - --------- ----- ---
----- ------------------------------------------------------------------------------- -----------------
------- ----------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
---- -- --------------------------- - ---
----- --------------------------------------------------------------------------------- -----------------
------- ---------------------- ----------------------------------------------------------------------------------------
-------
------
---- ---------------- ------
---- ------------
---- --------------- ---------
--- ------------------ ---------------
---- ---------------------
------
------
------
-------
-------快速使用
我们已经完成了Bootstrap-slider的安装，下面看一下如何在我们的前端页面中使用Bootstrap-slider。
我们来看一个基本的示例，代码如下：
--------- -----
------
------
---------------- --------------
----- ----------------
---- -- ------ - --------- ----- ---
----- ------------------------------------------------------------------------------- -----------------
------- ----------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
---- -- --------------------------- - ---
----- --------------------------------------------------------------------------------- -----------------
------- ---------------------- ----------------------------------------------------------------------------------------
-------
------
---- ---------------- ------
---- ------------
---- --------------- ---------
--- ------------------ ---------------
---- ---------------------
------
------
------
------- -----------------------
---------------------------- -
------------------------
---- --
---- ----
----- ---
------ --
---
---
---------
-------
-------上示例代码所展示的，很简单，基于选定的元素，它会给我们生成一个无缝兼容的 Bootstrap 滑动条。在这个例子中，我们生成了一个标准的滑动条，它拥有0到100的数值，每次增加10，初始值为50。
如果你想作进一步地改进调整，我们可以修改针对这个组件的CSS，这样它将有更多的风格选项可供选择，或者修改针对滑动条进行的JavaScript。任何情况下，只需通过开源的Bootstrap-slider仓库进行修改。
##滑动条的主要设置 通过上面的简单样例了解了一个简单的Bootstrap-slider实现方案，接下来，我们来详细了解一下Bootstrap-slider的主要设置：
###min属性 表示滑块最左侧的下限。
------------------------
---- --
---- ---
---###max属性 表示滑块最右侧的上限。
------------------------
---- --
---- ---
---###range属性 用于设定滑块的可选范围值。取值有'value', 'min' , 'max' , 'false'。这个属性可以用于将滑块限制为左侧或右侧的值，或者可以将范围限制为特定的更大或更小的数字。
-- -------------------
------------------------
---- --
---- ----
------ ----
---###value属性 设置滑块的初始值。
------------------------
---- --
---- ----
------ --
---###step属性 表示滑块所设定的一个单个增量的单位值。
------------------------
---- --
---- ----
----- ---
------ --
---###orientation属性 用于设定滑块的方向（垂直/水平）取值有：'vertical' 或 'horizontal'。
------------------------
---- --
---- ----
------------ -----------
------ --
---###tooltip属性 用于设定滑块的tooltip是否可见。取值有：'show', 'hide', 'always'，'false'（tooltip不可见）。
------------------------
---- --
---- ----
------ ---
-------- --------
---常见问题
Q：我的页面不能够加载 Bootstrap-slider ？ A：一般情况下，这个问题可能源于类库的无法正常导入或者 HTML 没有引入或 Bootstrap 或者 jQuery 库中的一个或多个。首先确认一下 HTML 文件中是否已经正确地引入了 Bootstrap 和 jQuery 。
Q：我的滑块在不同的浏览器中显示不一致？ A：Bootstrap-slider 是由 CSS 和 JavaScript 两部分构成。CSS 样式会碰到浏览器兼容性的问题。在这种情况下，尝试在CSS中使用别的样式规则或者重写一下CSS。如果依旧存在问题，就找到 JavaScript 部分来看一下Bootstrap-slider的运行方式。
结语
Bootstrap-slider 作为前端开发中的一款通用插件，能够让我们快速地添加滑动条功能。通过阅读本文，希望读者们能够掌握如何在前端页面中使用 Bootstrap-slider 控件，并根据具体项目需求添加相应的 Bootstrap-slider 组件。如果您还有任何问题、建议和评论，请千万不要犹豫，欢迎向我们留言。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056e9281e8991b448e7537