bootstrap-slider例子地址：https://seiyria.com/bootstrap-slider/
bootstrap-slider github地址：https://github.com/seiyria/bootstrap-slider
这个插件的使用方法并不难，我们可以在它的例子页面看到很多种情况的使用方法，都给了相应的代码。我就简述一下在使用过程中遇到的一些坑及解决办法。
我们需要实现的功能如下图所示：
简而言之就是，选择之后实时将你选中的数据返回到文本框里面。
解决思路：
1.点击文本框 显示 浮层（这里有个坑，我后面会讲到）；
2.实例化 拖动 插件；
3.将 选中的值 实时返回到文本框（这里也有个坑）。
解决方案：
解决问题1——点击文本框 显示 浮层
因为项目是基于bootstrap,所以我直接用的是 bootstrap 的下拉菜单插件，具体代码如下：
<div class="form-group btn-group"> <div class="input-icon right dropdown-toggle " data-toggle="dropdown"> <i class="fa fa-angle-down font-blue">i> <input type="text" class="form-control input-small" placeholder="请选择年龄段" id="ageValue"> div> <div class="dropdown-menu dropdown-content" role="menu"> <input id="ageSlider" type="text" data-stopPropagation="true" data-slider-min="0" data-slider-max="50" data-slider-step="0.5" data-slider-value="[2,5]" data-slider-tooltip="hide"/> div> div>
其中里面的data-slider-XXX 是针对于bootstrap-slider插件定义的一些属性，具体可以查看它的github地址，上面都有详细的说明。如下图：
解决问题2——实例化 拖动 插件
var ageSlider = $("#ageSlider").bootstrapSlider()
这里要说明一下的就是，如果你不是依赖于bootstrap开发的话，需要写成下面这个：
//引用了jquery的时候
var ageSlider = $("#ageSlider").slider({})
//没有引用jquery的时候
var ageSlider = new Slider(\'#ageSlider\', {});
解决问题3——将 选中的值 实时返回到文本框
解决思路就是在值改变的时候，返回一个函数，函数的作用是把值写入到文本框里面。
我们如何捕获到它的值改变了呢？我们可以看到插件提供了一个change事件：
我们怎么获取到slider的值呢？插件提供了一个 getValue 的方法：
接下来就好办了，直接把值写入到文本框里面就可以了。具体代码如下：
var ageChange = function() { var ageArr = ageSlider.bootstrapSlider(\'getValue\'); $(\'#ageValue\').val(ageArr[0]+\'岁\' + \'~\' + ageArr[1]+\'岁\'); }; var ageSlider = $("#ageSlider").bootstrapSlider().on(\'change\',ageChange);
功能实现基本就到这里了。
-------我是天堂与地狱之间的分隔线了-------
接下来说下我遇到的坑。。。各位看官有兴趣也可以继续看下去。。毕竟这也是一条充满血与泪的路哇。能够让你少走弯路。
坑一：解决问题一的时候，发现一个问题，就是你在拖动结束之后浮层就会隐藏掉。如下图：
解决方法就是点击浮层的时候，阻止它的隐藏事件。代码如下：
$(\'.dropdown-menu\').click(function(e) { e.stopPropagation(); });
.dropdown-menu 是那个浮层：
解决方案来自于：Keep Bootstrap dropdown open on click
坑二：解决问题3时，报错：getValue is not a function。
一开始，我是按照官方的案例getValue()来写的。如下图：
我开始是这么写的，如下图：
然后就报错了。。。
后面看它的官方文档，才知道要按照下图这么写：
好了，该交待的都已交待完毕啦~~感觉自己棒棒哒~
最后来份代码全家福压压惊~
京公网安备 11010802041100号