基於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的瀏覽器都不支持。

配置參數

原文地址