基于Bootstrap的jQuery slider插件的使用bootstrap-slider.js

插件介绍

这是一款在原生bootstrap slider的基础上制作效果非常炫酷的jQuery slider插件。该slider插件可以自定义slider的颜色、形状、透明度和tooltip等属性，美化的效果非常好

简单Demo

1. 使用CDN服务

<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">    
<link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">  


<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>   
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    
<script src="//cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>  

要注意引用循序哟，博主曾经就应为引用循序被坑了呢

2. HTML，css定义

<style>  
    #ex1Slider .slider-selection {  
        background: #BABABA;  
    }  
</style>  
<input  id="ex1" data-slider-id="ex1Slider" type="text"  
       data-slider-min="0" data-slider-max="20" data-slider-step="1"  
       data-slider-value="15"/>  

3.js

// With JQuery 使用JQuery 方式调用  
$('#ex1').slider({  
    formatter: function (value) {  
        return 'Current value: ' + value;  
    }  
}).on('slide', function (slideEvt) {  
    //当滚动时触发  
    //console.info(slideEvt);  
    //获取当前滚动的值，可能有重复  
    // console.info(slideEvt.value);  
}).on('change', function (e) {  
    //当值发生改变的时候触发  
    //console.info(e);  
    //获取旧值和新值  
    console.info(e.value.oldValue + '--' + e.value.newValue);  
});  

浏览器兼容
该bootstrap slider插件只支持现代浏览器，低于IE9的浏览器都不支持。

配置参数

原文地址