水平滑块

初始化开始值

分散模式 (精度 = 20)

事件手柄

移动标记可以看到工作效果。

当前值: 0

垂直滑块

组件结构

    <div class="slider" data-role="slider">
        <div class="complete"></div>
        <div class="marker"></div>
    </div>

定义组件

    <div class="slider" data-role="slider"></div>

    <div class="slider" data-role="slider" data-param-init-value="35"></div>

    <div class="slider" data-role="slider" data-param-accuracy="20"></div>

    <div class="slider vertical" data-role="slider"></div>

使用垂直滑动条你必须手动设置height属性。

参数

你可以设置滑块参数: data-param-init-value (default: 0) 和 data-param-accuracy (default: 1)。设置分散式值,精度不等于1。

事件

滑块组件支持下开事件: onchange, onchanged. onchange 事件触发滑块位置改变。onchanged 事件触发朦板块停止。

    $(function(){
        $("#slider1").on("change", function(e, val){
            // e is event
            // val is current value
            ...
        })

        $("#slider1").on("changed", function(e, val){
            // e is event
            // val is current value
            ...
        })

        // for retrieve a current value you can call
        $("#slider1").data('value');
    })

Javascript

使用滑块组件,需要在你的页面头部添加slider.js