基于Bootstrap的炫酷jQuery slider插件

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

安装

可以使用npm和bower来安装该slider插件。

npm install bootstrap-slider
bower install seiyria-bootstrap-slider
                

使用方法

首先要在页面中引入必要的css和js文件。

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-slider.css" rel="stylesheet">
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/bootstrap-slider.js"></script>
                

记住要在引入完上边的文件后才可以开始调用该bootstrap slider插件。

注意：这个bootstrap slider插件可以不依赖于jQuery，使用纯js的方式也可以操作它。

浏览器兼容

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

应用举例

作为jQuery插件版本的bootstrap-slider。

插件一个input元素，然后在它上面调用.slider()方法。

// Instantiate a slider
var mySlider = $("input.slider").slider();

// Call a method on the slider
var value = mySlider.slider('getValue');

// For non-getter methods, you can chain together commands
    mySlider
        .slider('setValue', 5)
        .slider('setValue', 7);                
                

如果已经有一个jQuery插件的slider()绑定在该命名空间中，那么bootstrap slider插件会一个候补的调用方法bootstrapSlider。

// Instantiate a slider
var mySlider = $("input.slider").bootstrapSlider();

// Call a method on the slider
var value = mySlider.bootstrapSlider('getValue');

// For non-getter methods, you can chain together commands
    mySlider
        .bootstrapSlider('setValue', 5)
        .bootstrapSlider('setValue', 7);
                

使用原生js调用bootstrap slider

在DOM中创建一个input元素，然后通过选择器为该input元素创建slider实例。

// Instantiate a slider
var mySlider = new Slider("input.slider", {
    // initial options object
});

// Call a method on the slider
var value = mySlider.getValue();

// For non-getter methods, you can chain together commands
mySlider
    .setValue(5)
    .setValue(7);
                

配置参数

以下这些参数也可以通过一个data属性（data-slider-foo）或作为slider对象的一部分来调用。

方法

事件