小巧的jQuery区域范围滑块插件noUiSlider

分类：代码日期：2013-11-29

jQuery区域范围滑块插件noUiSlider

区域范围滑块在 Windows 系统中很常见，如更改分辨率（Windows XP 为横向，Windows 7 为纵向）。在 HTML5 中，input 也新增了一个类似这种效果的 type 属性 range，这种滑块能给用户提供更好的体验，然而古老的 IE6、IE7 和 IE8 等并不支持。如果希望在 IE 中使用这种效果，那么 noUiSlider 也许可以帮到你。

noUiSlider 是一款小巧的范围滑块插件，它能很轻松的制作出类似 HTML5 中 type=”range” 的效果，甚至是更强大的效果。它可以制作横向和种纵向的滑块，甚至是两个滑块选取某一段范围，noUiSlider 的数值可以精确到小数点后一位或后两位。

noUiSlider 兼容 Firefox、Chrome、Opera、Safari 和 IE7+ 浏览器，其实也兼容 IE6，只是样式上有点小问题。

使用方法

引入文件

<link rel="stylesheet" href="css/nouislider.fox.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.nouislider.min.js"></script>

HTML

<div class="noUiSlider"></div>

class=”noUiSlider” 是必须的，因为需要与样式结合，除非你想自己写样式，class 可以添加多个值。

JavaScript

$(function() {
    $('.noUiSlider').noUiSlider({
        range: [0, 100],
        start: 0,
        step: 10,
        handles: 1
    });
});

参数

参数	类型	说明	默认值
range	数组	必填，滑块的总范围	无
start	数组	设置滑块开始至结束的范围	无
handles	整数	设置滑块的数量，可选 1 或 2	2
connect	字符串或布尔值	连接，可选 lower、upper、true、false	无
orientation	字符串	设置滑块的方向，可选 vertical（纵向）或 horizontal（横向）	horizontal
margin	数值	当有两个滑块时（即 handles 为 2），设置两个滑块的最小距离	无
serialization		传递数值及设置数值小数点位数（查看下表）	无
slide	函数	允许你编写任意函数	无
step	数值	滑块每滑动一步的数字	无