在查找一滑动条插件的时候,发现了一款 jQuery 支持的插件 range.slider,效果非常不错。于是通读了使用文档,本文算是一个插件积累吧,以备不时之需。

一、先看效果

demo

二、简单示例

看完效果,我们来看看如何使用:
1.下载安装

1
2
3
4
5
# bower
bower install ionrangeslider
# npm
npm install ion-rangeslider

建议通过 bower 下载,这样可以看到所有的资源文件,包括依赖的 jQuery 文件。

2.slider 重写了 input 元素,所以你需要先添加一个 input

1
<input type="text" id="example_id" name="example_name" value="" />

然后根据元素 id 来初始化 slider

1
$("#example_id").ionRangeSlider();

好了,刷新页面看看,是不是很简单就使用了。

三、参数详解

要简单的使用,那上面就满足需求了。但是在实际开发中,可能需要我们了解更多参数配置,丰富我们的使用场景。

  • type: 控制手柄 string 类型
    • “single” || “double”
  • min: 最小值 number 类型
    • 10
  • max: 最大值 number 类型
    • 100
  • from: 起点 number 类型
    • min
  • to: 最大值 number 类型
    • max
  • step: 步进值 number 类型
    • 1
  • prefix: 前缀 string 类型
  • postfix: 后缀 string 类型
  • max_postfix: 最大值后缀
  • grid: 是否显示标尺
  • grid_num: 标尺单位

更多请查看文档

四、高级用法

对参数有了了解,下面列举一些复杂的使用场景:
1.传入更多的对象来初始化 slider

1
2
3
4
5
6
7
8
9
10
$("#example").ionRangeSlider({
min: 0,
max: 10000,
from: 1000,
to: 9000,
type: 'double',
prefix: "$",
grid: true,
grid_num: 10
});

2.可以通过 data-*html 中初始化,如下:

1
2
3
4
5
6
7
8
data-min="0"
data-max="10000"
data-from="1000"
data-to="9000"
data-type="double"
data-prefix="$"
data-grid="true"
data-grid-num="10"

3.可用方法 update, reset, destroy

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Launch plugin
$("#range").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
// Saving it's instance to var
var slider = $("#range").data("ionRangeSlider");
// UPDATE - updates slider to any new values
slider.update({
from: 300,
to: 400
});
// RESET - reset slider to it's first values
slider.reset();
// DESTROY - destroys slider and restores original input field
slider.destroy();

调用这三个方法,务必先实例化 ionRangeSlider

4.监听 change 事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var $range = $("#range_47");
$range.ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50
});
$range.on("change", function () {
var $this = $(this),
value = $this.prop("value");
console.log("Value: " + value);
});

5.angularjs 中使用

1
<input type="text" name="" value="5" ng-model="demoVals" class="ion_slider" ui-jq="ionRangeSlider" ui-options="slider.options" />

JS 中需要初始化:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$scope.slider = {
options: {
min: 1,
max: 10,
step: 0.1,
from: 6,
prefix: '直径 ',
postfix: ' 公里',
max_postfix: '+',
grid: true,
onFinish: function (event) {
// Todo
}
}
}

五、事件支持

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$("#range_43").ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50,
keyboard: true,
onStart: function (data) {
console.log("onStart");
},
onChange: function (data) {
console.log("onChange");
},
onFinish: function (data) {
console.log("onFinish");
},
onUpdate: function (data) {
console.log("onUpdate");
}
});

六、注意事项

1.进度条是图片,所以如果你对配色不满意,只能替换图片了。
2.rangeSlider 支持换肤,需要下载不同的 css 皮肤文件以及对应的 JS 文件,如:FlatUI, Modern, HMTL5, Nice White, Dark 等。

七、资源网站

rangeSlider
demo page