拖动条 ui.slider

拖动条

<div class="ui-slider" data-min="10" data-max="200" data-unit="px" data-precision="0">
    <span class="progress">
        <em style="width: 47.36842105263158%;"></em>
        <i style="left: 47.36842105263158%;position:absolute;" class="handler ui-draggable"></i>
    </span>
    <span class="value">100px</span>
    <input type="hidden" name="width" value="100">
</div>

• 使用slider控件时不需要考虑样式问题
• 所有slider控件需遵循这样的一个结构

呈现样式

具体效果可参见 http://www.kuaizhan.com/ui/ui-create

创建一个slider

使用接口 ui.slider 可以动态地创建一个slider

参数（以JS Object形式给出）：
    name: 设置input hidden标签的name,便于之后获取数据
    min: slider的最小值
    max: slider的最大值
    unit: 单位
    precision: 精确度(保留几位小数)
    value: slider当前值
    不需要使用的参数可以直接省略

示例代码:

    var form = $("#js-form-put-slider");
    //获取slider对应的html
    var slider = ui.slider.create({
        "name": "width",
        "min": 10,
        "max": 200,
        "unit": "px",
        "precision": 2,
        "value": 100
    });

    form.find(".js-put-slider").replaceWith(slider);
    //绑定slider相关事件
    ui.slider.init(form);
    //针对slider数据变化进行处理
    form.on("change", ":input[name='width']", function() {
        var t = this;
        console.log(t.value);
    });