引言
Bootstrap-slider 是一个基于 bootstrap 的跨浏览器的拖动条控件，可以帮助我们在前端页面中快速添加滑动条的功能。用它可以方便的实现音乐播放器进度条、网站背景图的滑动变化、滑动型分页的效果等。在我们平时的开发中，滑动条控件已经变得越来越普遍，目前的前端框架或库中都已经包含了相应组件或控件。
在本文中，我们想要介绍的是一种可以快速使用的表示滑动条的 npm 包 michiweber.boostrap-slider。本文将从以下几个方面入手，详细讲解 npm 包的使用方法，并给出相应的 demo，希望能够帮助大家熟练掌握其使用技巧。
安装npm 包 michiweber.bootstrap-slider
我们可以通过 npm 在我们的项目中将 michiweber.bootstrap-slider 安装一下。在命令行中输入以下命令即可完成安装：
npm install 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属性 表示滑块最左侧的下限。
$("#my-slider").slider({ min: 0, max: 100 });
###max属性 表示滑块最右侧的上限。
$("#my-slider").slider({ min: 0, max: 100 });
###range属性 用于设定滑块的可选范围值。取值有'value', 'min' , 'max' , 'false'。这个属性可以用于将滑块限制为左侧或右侧的值，或者可以将范围限制为特定的更大或更小的数字。
// 只能在自己的最小值和最大值之间选择数值 $("#my-slider").slider({ min: 0, max: 100, range: true });
###value属性 设置滑块的初始值。
$("#my-slider").slider({ min: 0, max: 100, value: 50 });
###step属性 表示滑块所设定的一个单个增量的单位值。
$("#my-slider").slider({ min: 0, max: 100, step: 10, value: 50 });
###orientation属性 用于设定滑块的方向（垂直/水平）取值有：'vertical' 或 'horizontal'。
$("#my-slider").slider({ min: 0, max: 100, orientation: 'vertical', value: 50 });
###tooltip属性 用于设定滑块的tooltip是否可见。取值有：'show', 'hide', 'always'，'false'（tooltip不可见）。
$("#my-slider").slider({ min: 0, max: 100, value: 50, tooltip: 'always' });
常见问题
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
