基于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的浏览器都不支持。

配置参数

原文地址