html 文件域变滑块,小巧的jQuery区域范围滑块插件noUiSlider

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

分类：代码

日期：2020-02-10

点击(21,970)

下载(0)

来源：未知

收藏

区域范围滑块在 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，只是样式上有点小问题。

使用方法

引入文件

HTML

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

数值

滑块每滑动一步的数字

无

选项

参数

to

$Object, “string”,array[$Object, $Object],array[“string”, “string”]

booleanfalse

resolution

1、0.1、0.01