在查找一滑动条插件的时候,发现了一款 jQuery
支持的插件 range.slider
,效果非常不错。于是通读了使用文档,本文算是一个插件积累吧,以备不时之需。
一、先看效果
二、简单示例
看完效果,我们来看看如何使用:
1.下载安装
1 | # bower |
建议通过 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 | $("#example").ionRangeSlider({ |
2.可以通过 data-*
在 html
中初始化,如下:
1 | data-min="0" |
3.可用方法 update
, reset
, destroy
1 | // Launch plugin |
调用这三个方法,务必先实例化 ionRangeSlider
。
4.监听 change
事件
1 | var $range = $("#range_47"); |
5.angularjs
中使用
1 | <input type="text" name="" value="5" ng-model="demoVals" class="ion_slider" ui-jq="ionRangeSlider" ui-options="slider.options" /> |
JS 中需要初始化:
1 | $scope.slider = { |
五、事件支持
1 | $("#range_43").ionRangeSlider({ |
六、注意事项
1.进度条是图片,所以如果你对配色不满意,只能替换图片了。
2.rangeSlider
支持换肤,需要下载不同的 css
皮肤文件以及对应的 JS
文件,如:FlatUI, Modern, HMTL5, Nice White, Dark 等。