ion.rangeSlider.js 参数文档

好用的滑动条插件
请引入文件ion.rangeSlider.js以及对应的css文件
这里目前只有对应参数的解释，其他的代码请不要照搬，我会有时间重新整理的。

滑动块

滑动型输入器，展示当前值和可选范围。

何时使用

当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

### 代码演示首先要添加依赖，使用`require([‘slider’],function(slider){…})`就可以将基本依赖添加进去。使用的初始化函数要在`function(){}`内填写。简单实现*****

基本样式

---

html代码

<div class="col-md-9">    <input id="range_1" type="text" /></div>

js代码

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>

js代码

require(['slider'],function(slider){        $("#range_2").ionRangeSlider({            min: 100,            max: 1000,            from: 550        });    })

#### 双滑块 标尺 和前缀与后缀把模式设置为`type: “double”`并且通过`from: 200`和`to: 800`指定作用范围， 并且可以展示出标尺`grid: true`和单位前缀`prefix:”$”`（后缀属性为`postfix`）*****

范围模式

---

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>

js代码

require(['slider'],function(slider){        $("#range_3").ionRangeSlider({                    type: "double",                    grid: true,                    min: 0,                    max: 1000,                    from: 200,                    to: 800,                    prefix: "$"                });    })

#### 自定义坐标及步数把坐标的值分别设为`values: [0, 10, 100, 1000, 10000, 100000, 1000000]`并且通过`from: 1`和`to: 5`预设初始作用范围，就可以按照自设的坐标进行移动。*****

自定义步数

---

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>

js代码

require(['slider'],function(slider){        $("#range_4").ionRangeSlider({                    type: "double",                    grid: true,                    from: 1,                    to: 5,                    values: [0, 10, 100, 1000, 10000, 100000, 1000000]                });    })

#### 固定、限制、与无效，坐标指定坐标间隔。`from_fixed: true`可以让from端固定在起始位置而不可移动;`from_min: 10,from_max: 30,from_shadow: true,to: 80,to_min: 70,to_max: 90,to_shadow: true,`可以分别限制两端的活动范围，并用阴影来显示可活动范围。`disable: true`则可以让整个滑动条无效。`grid: true,grid_num: 10`可以设定坐标间隔。*****

固定与限制

无效

---

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颜色变量。

("#range_1").ionRangeSlider();("#range_2").ionRangeSlider({ min: 100, max: 1000, from: 550 });("#range_3").ionRangeSlider({
                    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););varrange2 = ("#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]););varrange3 = ("#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();)varrange4 = ("#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);varrangeNum =(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 }) }); }