滑块

使用滑块需要先载入JS文件：

<script src="/static/auicss/script/aui-range.js"></script>

使用弹窗之前需要先实例化对象 var range = new auiRange(options, callback);，options参数如下：

options: {
    element: '', // 滑块DOM对象
}

callback 回调参数如下：

function callback(res) {
    res.value // 滑块的值0 ~ 100
}

示例源码

<div class="aui-content">
    <p>带有提示的滑块：<span id="value-1">30</span></p>
    <div class="aui-range" style="margin-top:30px;">
        <input type="range" class="aui-range-danger" value="30" max="100" min="1" step="1" id="range" />
    </div>
</div>
<div class="aui-content">
    <p>带有提示的滑块：<span id="value-2">40</span></p>
    <div class="aui-range" style="margin-top:30px;">
        <input type="range" value="40" max="100" min="1" step="1" id="range2" />
    </div>
</div>
<div class="aui-content">
    <p>普通滑块：<span id="value">50</span></p>
    <div class="aui-range"><input type="range" value="50" max="100" min="1" class="aui-range-primary" id="demo" /></div>
</div>
<script type="text/javascript" src="/static/auicss/script/aui-range.js" ></script>
<script type="text/javascript">
    var range = new auiRange({
        element:document.getElementById("range")
    },function(ret){
        document.getElementById("value-1").textContent = ret.value;
    })
    var range2 = new auiRange({
        element:document.getElementById("range2")
    },function(ret){
        document.getElementById("value-2").textContent = ret.value;
    })
    document.getElementById("demo").addEventListener("change",function(){
        document.getElementById("value").textContent = this.value;
    });

</script>