本文介绍了一款实用的滑动条插件ion.rangeSlider.js及其使用方法。插件支持设置最大值、最小值、双滑块模式、自定义坐标等功能，并提供了丰富的事件回调。文中还详细介绍了如何通过JavaScript代码进行初始化配置。
好用的滑动条插件
请引入文件ion.rangeSlider.js以及对应的css文件
这里目前只有对应参数的解释，其他的代码请不要照搬，我会有时间重新整理的。
滑动块
滑动型输入器，展示当前值和可选范围。
何时使用
当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。
### 代码演示 首先要添加依赖，使用`require([‘slider’],function(slider){…})`就可以将基本依赖添加进去。使用的初始化函数要在`function(){}`内填写。 简单实现 *****html代码
<div class="col-md-9">
<input id="range_1" type="text" />
</div>
require(['slider'],function(slider){
$("#range_1").ionRangeSlider();
})
html代码
<div class="form-group">
<label class="col-md-3 control-label">最大值 & 最小值</label>
<div class="col-md-9">
<input id="range_2" type="text" value="" />
</div>
</div>
require(['slider'],function(slider){
$("#range_2").ionRangeSlider({
min: 100,
max: 1000,
from: 550
});
})
html代码
<div class="form-group">
<label class="col-md-3 control-label">范围模式</label>
<div class="col-md-9">
<input id="range_3" type="text" value="" />
</div>
</div>
require(['slider'],function(slider){
$("#range_3").ionRangeSlider({
type: "double",
grid: true,
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: "$"
});
})
html代码
<div class="form-group">
<label class="col-md-3 control-label">自定义步数</label>
<div class="col-md-9">
<input id="range_4" type="text" value="" />
</div>
</div>
require(['slider'],function(slider){
$("#range_4").ionRangeSlider({
type: "double",
grid: true,
from: 1,
to: 5,
values: [0, 10, 100, 1000, 10000, 100000, 1000000]
});
})
html代码
<div class="form-group">
<label class="col-md-3 control-label">固定与限制</label>
<div class="col-md-9">
<input id="range_5" type="text" value="" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">无效</label>
<div class="col-md-9">
<input id="range_6" type="text" value="" />
</div>
</div>
js代码
require(['slider'],function(slider){
$("#range_5").ionRangeSlider({
type: "double",
min: 0,
max: 100,
from: 20,
from_fixed: true,
to: 80,
to_min: 70,
to_max: 90,
to_shadow: true,
grid: true,
grid_num: 10
});
})
require(['slider'],function(slider){
$("#range_6").ionRangeSlider({
min: 0,
max: 100,
from: 30,
disable: true
});
})
主要参数说明
optItems
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| `min` | 滑动条最小值 | `number` | 无 |
| `max` | 滑动条最大值 | `number` | 无 |
| `from` | 初始值 | `number` | 0 |
| `to` | 终点值（双滑块模式下有效） | `number` | 0 |
| `type` | 设置滑块类型 | `string` | 设置为`type:”double”`时为双滑块，默认为`”single”`单滑块 |
| `grid` | 坐标分格，设置为`grid:true`时有坐标分格 | `Boolean` | `false` |
| `grid_num` | 设置坐标分格的单位步幅`grid_num:100` | `number` | 0 |
| `step` | 设置`step: 100`每次滑块移动的步幅为100 | `number` | 1 |
| `keyboard` | 设置`keyboard: true`则可以用键盘方向键来操作滑块移动 | `boolean` | `false` |
| `keyboard_step` | 设置`keyboard_step: 20`则可以设置键盘操作滑块移动的步幅 | `number` | 1 |
| `hide_min_max` | 设置`hide_min_max: true`则可以隐藏滑动条最大值与最小值 | `boolean` | `false` |
| `prefix` | 设置指示标签的前缀 | `String` | 无 |
| `postfix` | 设置指示标签的后缀 | `String` | 无 |
| `values` | `grid: true`时可以用`value:[]`传递数组来自定义坐标 | `array` | |
| `from_fixed` | 设置`from_fixed: true`时，from为不移动的状况 | `Boolean` | |
| `from_min` `from_max` `to_min` `to_max` | 设置起点、终点的移动范围 | `number` | 无 |
| `from_shadow` `to_shadow` | 设置活动范围后，可以设置阴影来标示范围。 | `Boolean` | 无 |
| `min_interval` `max_interval` | 设置双滑块后，`min_interval: 20`和`max_interval: 50`可分别设置两滑块的最小间距与最大间距。 | `number` | 无 |
| `drag_interval` | 设置双滑块后，`drag_interval: true`可拖动两滑块中间部分一起拖动起始点与终点。 | `number` | 无 |
| `disable` | 设置`disable: true`,该滑动条为不可用状态。 | `Boolean` | 无 |
事件
<input type="text" id="range_43" value="" name="range" />
四种触发的事件：
onStart事件，第一次加载时触发;onChange事件，数值变化（滑动）就触发;onFinish事件，数值变化结束时（滑动结束时）触发;onUpdate事件，重置时触发。
data返回对象包含的数值:
{
"min": 1000,
"max": 5000,
"from": 1700,
"from_percent": 17.5,
"from_value": null,
"to": 4400,
"to_percent": 85,
"to_value": null
}
其中，value值为自定义value时所选的值。
$("#range_43").ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50,
keyboard: true,
onStart: function (data) {
console.log("onStart");
console.log(data)
},
onChange: function (data) {
console.log("onChange");
console.log(data)
},
onFinish: function (data) {
console.log("onFinish");
console.log(data)
},
onUpdate: function (data) {
console.log("onUpdate");
console.log(data)
}
});
另一种简便的取值方式
简单分为单滑块和双滑块两种快速取值方式，单滑块只取value推荐使用。
var $range = $("#range_44");
$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);
});
var $range2 = $("#range_45");
$range2.ionRangeSlider({
type: "double",
min: 0,
max: 100,
from: 20,
to: 80
});
$range2.on("change", function () {
var $this = $(this),
value = $this.prop("value").split(";");
console.log(value[0] + " - " + value[1]);
});
双滑块利用data属性取值也很方便，详情代码见如下
var $range3 = $("#range_46");
$range3.ionRangeSlider({
type: "double",
min: 1000,
max: 5000,
from: 2000,
to: 4000
});
$range3.on("change", function () {
var $this = $(this),
from = $this.data("from"),
to = $this.data("to");
console.log(from + " - " + to);
});
更新、重置、创造与销毁
更新与重置
如果你已经创造了一个slider，有些数据想要刷新，可以使用update()指令传递参数 具体操作流程如下:
如果你想重置到滑动改变之前的状态，可以使用reset()指令恢复到初始创造状态，使用方法如下:
更新 重置
// 创造一个slider
$("#range_47").ionRangeSlider({
type: "double",
min: 0,
max: 1000,
from: 200,
to: 500,
grid: true
});
// 将slider实例存到变量中
var slider = $("#range_47").data("ionRangeSlider");
// 使用`update`指令更新参数
slider.update({
min: 100,
max: 500,
from: 150,
to: 450,
step: 50
// etc.
});
// 使用reset()重置
slider.reset();创造与销毁
如果你已经创造了一个slider，有些数据想要刷新，可以使用update()指令传递参数 具体操作流程如下:
如果你想重置到滑动改变之前的状态，可以使用reset()指令恢复到初始创造状态，使用方法如下:
创造 销毁
var $range4 = $("#range_48"),
$create_btn = $(".creat"),
$destroy_btn = $(".destroy"),
slider5;
var create = function () {
$range4.ionRangeSlider({
type: "double",
min: 0,
max: 1000,
grid: true
});
slider5 = $range4.data("ionRangeSlider");
};
$create_btn.on("click", function () {
create();
});
$destroy_btn.on("click", function () {
slider5 && slider5.destroy();
});与数字输入框联合使用
slider可以与数字输入框进行联动，只需要事先将两者关联绑定即可，详细代码如下:
//创建一个slider
$("#range_66").ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50,
onStart: function (data) {
//进行数值初始化时的数据同步
$("#range_66_num").val(data.from)
}
});
//进行两者的联动绑定
sliderWithIputNumber({
rangeID : "#range_66",
rangeNumID : "#range_66_num"
})
//slider与iputNumber关联函数
function sliderWithIputNumber(options){
var rangeID = options['rangeID']
var rangeNumID = options['rangeNumID']
var $range = $(rangeID);
var $rangeNum =$(rangeNumID)
$range.on("change", function () {
var $this = $(this),
value = $this.prop("value");
$rangeNum.val(value)
});
$rangeNum.on("change", function () {
var value = $rangeNum.val();
var slider = $range.data("ionRangeSlider");
slider.update({
from: value
})
});
}自定义样式
该slider样式均由css书写而成，支持自定义样式。
您可以根据gs.slider.less文件里面书写您喜欢的样式属性。
也可以通过全局来控制有关slider的less颜色变量。
type: "double",
grid: true,
min: 0,
max: 1000,
from: 200,
to: 800,
prefix: "$"
});("#range_4").ionRangeSlider({ type: "double", grid: true, from: 1, to: 5, values: [0, 10, 100, 1000, 10000, 100000, 1000000] }); ("#range_5").ionRangeSlider({
type: "double",
min: 0,
max: 100,
from: 20,
from_fixed: true,
to: 80,
to_min: 70,
to_max: 90,
to_shadow: true,
grid: true,
grid_num: 10
});("#range_6").ionRangeSlider({ min: 0, max: 100, from: 30, disable: true }); ("#range_43").ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50,
keyboard: true,
onStart: function (data) {
console.log("onStart");
console.log(data)
},
onChange: function (data) {
console.log("onChange");
console.log(data)
},
onFinish: function (data) {
console.log("onFinish");
console.log(data)
},
onUpdate: function (data) {
console.log("onUpdate");
console.log(data)
}
});
varrange = ("#range_44");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););var range2 = ("#range_45");range2.ionRangeSlider({ type: "double", min: 0, max: 100, from: 20, to: 80 }); range2.on("change",function()var$this=$(this),value=$this.prop("value").split(";");console.log(value[0]+"−"+value[1]););var range3 = ("#range_46");range3.ionRangeSlider({ type: "double", min: 1000, max: 5000, from: 2000, to: 4000 }); range3.on("change",function()var$this=$(this),from=$this.data("from"),to=$this.data("to");console.log(from+"−"+to);); ("#range_47").ionRangeSlider({ type: "double", min: 0, max: 1000, from: 200, to: 500, grid: true }); var slider = ("#range_47").data("ionRangeSlider");('.update').on('click',function(){ slider.update({ min: 100, max: 500, from: 150, to: 450, step: 50 // etc. }); }) (′.reset′).on(′click′,function()slider.reset();)var range4 = ("#range_48"),create_btn = (".creat"), destroy_btn = (".destroy"),slider5;varcreate=function()$range4.ionRangeSlider(type:"double",min:0,max:1000,grid:true);slider5=$range4.data("ionRangeSlider");; create_btn.on("click", function () { create(); }); destroy_btn.on("click", function () {
slider5 && slider5.destroy();
});("#range_66").ionRangeSlider({ type: "single", min: 0, max: 100, from: 50, onStart: function (data) { //进行数值初始化时的数据同步 ("#range_66_num").val(data.from)
}
});
//进行两者的联动绑定
sliderWithIputNumber({
rangeID : "#range_66",
rangeNumID : "#range_66_num"
})
//slider与iputNumber关联函数
function sliderWithIputNumber(options){
var rangeID = options['rangeID']
var rangeNumID = options['rangeNumID']
varrange = (rangeID);var rangeNum = (rangeNumID) range.on("change", function () { var this= (this), value = this.prop("value"); rangeNum.val(value) }); rangeNum.on("change", function () {
var value =rangeNum.val(); var slider = $range.data("ionRangeSlider"); slider.update({ from: value }) }); }
扫一扫
771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
