基于jquery的滑块插件rangeSlider
所属分类:其他  创作类型:收集  作者:呆猫  发布时间:2018-07-19 09:20:13
1151 25
本站所有插件都是基于jquery或php的,不依赖其他任何框架,可以集成到大部分网站上。如果有问题可以联系技术
QQ:635081743 微信:wangbin676243
Chrome Firefox Safari IE8+
描述:rangeSlider是一款基于jquery的滑块插件,它能实现单滑块,双滑块,自定义值域,键盘控制,功能强大!

使用步骤

第一步

加载必要的js,css资源文件

        <link rel="stylesheet" href="./css/ion.rangeSlider.css" />
        <link rel="stylesheet" href="./css/normalize.css" />
        <link rel="stylesheet" href="./css/ion.rangeSlider.skinModern.css" />

    
<script src="./jquery-1.9.1.js"></script>

    <script src="./js/ion.rangeSlider.js"></script>

第二步

布局html结构

              <input id="range_01" />
            

            <input id="range_02" />
            

            <input id="range_03" />
            

            <input id="range_04" />
            

            <input id="range_05" />
            

            <input id="range_06" />
            

            <input id="range_07" />
            

            <input id="range_08" />
            

第三步

js调用

    $("#range_01").ionRangeSlider({
    min: 100,
    max: 1000,
    from: 550
});
    $("#range_02").ionRangeSlider({
        type: "double",
        grid: true,
        min: 0,
        max: 1000,
        from: 200,
        to: 800,
        prefix: "$"
    });
    $("#range_03").ionRangeSlider({
        type: "double",
        grid: true,
        min: -1000,
        max: 1000,
        from: -500,
        to: 500,
        step: 250
    });
    $("#range_04").ionRangeSlider({
        type: "double",
        grid: true,
        from: 1,
        to: 5,
        values: [0, 10, 100, 1000, 10000, 100000, 1000000]
    });
    $("#range_05").ionRangeSlider({
        grid: true,
        from: 5,
        values: [
            "zero", "one",
            "two", "three",
            "four", "five",
            "six", "seven",
            "eight", "nine",
            "ten"
        ]
    });
    $("#range_06").ionRangeSlider({
        type: "double",
        min: 0,
        max: 100,
        from: 30,
        to: 70,
        from_fixed: true
    });
    $("#range_07").ionRangeSlider({
        type: "double",
        min: 0,
        max: 100,
        from: 30,
        to: 70,
        keyboard: true // true by default
    });
    $("#range_08").ionRangeSlider({
        type: "single",
        min: 1000,
        max: 5000,
        from: 2000,
        step: 100,
        onStart: function (data) {
            console.log(data.from);
        },
        onChange:  function (data) {
             console.log(data.from);
    },
    onFinish:  function (data) {
             console.log(data.from);
    },
    onUpdate: function (data) {
             console.log(data.from);
    }
    });
    

参数说明

min最小值
max最大值
from开始的值
type不设置或“double”,double代表双滑块
prefix前缀
to结束值,double的模式下,需要设置
step单次移动的距离
values自定义的值域
from_fixed锁定开始滑块
keybord是否启用键盘控制,左右键可以控制移动
onStart开始回调
onChange改变的回调,一般用来处理业务
onFinish完成的回调
onUpdate更新的回调,指的是插件的更新,onChange代表值的更新
相关插件

共有0条评论