mx-slider

默认情形

HTML Code:

<mx-view path="mx-slider/range"
    max="200"
    min="100"
    value="30,150"
    step="0.05"
    class="fl"
></mx-view>

垂直

HTML Code:

<mx-view path="mx-slider/range"
    max="200"
    min="100"
    value="30,150"
    step="0.05"
    vertical="true"
    class="fl"
></mx-view>

禁用

HTML Code:

<mx-view path="mx-slider/range"
    max="200"
    min="100"
    value="30,150"
    step="0.05"
    disabled="true"
    class="fl"
></mx-view>

响应change事件

HTML Code:

<mx-view path="mx-slider/range"
    max="500"
    min="200"
    value="210,350"
    step="10"
    mx-change="showValue()"
    class="fl"
></mx-view>

Javascript Code:

let Magix = require('magix');
let GTip = require('app/gallery/mx-gtip/index');
module.exports = Magix.View.extend({
    tmpl: '@index.html',
    mixins: [GTip],
    render() {
        let me = this;
        me.updater.digest();
    },
    'showValue<change>' (e) {
        this.gtipRT('value:' + e.value);
    }
});