fineui/demo/js/widget/slider/demo.slider.js

/**
 * Created by Urthur on 2017/9/4.
 */
Demo.Slider = BI.inherit(BI.Widget, {
    props: {
        baseCls: "demo-slider",
        width: 300,
        height: 50,
        min: 0,
        max: 100
    },

    render: function () {
        var self = this, o = this.options;
        var singleSlider = BI.createWidget({
            type: "bi.single_slider",
            digit: 0,
            width: o.width,
            height: o.height,
            cls: "layout-bg-white",
            value: 30,
            min: 10,
            max: 100
        });
        singleSlider.on(BI.SingleSlider.EVENT_CHANGE, function () {
            console.log(this.getValue());
        });

        var normalSingleSlider = BI.createWidget({
            type: "bi.single_slider_normal",
            width: o.width,
            height: 30,
            cls: "layout-bg-white",
            min: o.min,
            max: o.max,
            value: 30,
        });
        normalSingleSlider.on(BI.SingleSliderNormal.EVENT_DRAG, function () {
            console.log(this.getValue());
        });

        var singleSliderLabel = BI.createWidget({
            type: "bi.single_slider_label",
            width: o.width,
            height: o.height,
            digit: 0,
            unit: "个",
            cls: "layout-bg-white",
            min: o.min,
            max: o.max,
            value: 10,
        });

        var intervalSlider = BI.createWidget({
            type: "bi.interval_slider",
            width: o.width,
            digit: 0,
            cls: "layout-bg-white",
            min: o.min,
            max: o.max,
            value: {
                min: 10,
                max: 70
            }
        });

        var intervalSliderLabel = BI.createWidget({
            type: "bi.interval_slider",
            width: o.width,
            unit: "px",
            cls: "layout-bg-white",
            digit: 1,
            min: 0,
            max: 120,
            value: {
                min: 60,
                max: 120
            }
        });


        return {
            type: "bi.vertical",
            element: this,
            items: [{
                type: "bi.center_adapt",
                items: [{
                    el: singleSlider
                }]
            }, {
                type: "bi.center_adapt",
                items: [{
                    el: normalSingleSlider
                }]
            }, {
                type: "bi.center_adapt",
                items: [{
                    el: singleSliderLabel
                }]
            }, {
                type: "bi.center_adapt",
                items: [{
                    el: intervalSlider
                }]
            }, {
                type: "bi.center_adapt",
                items: [{
                    el: intervalSliderLabel
                }]
            }],
            vgap: 20
        };
    }
});
BI.shortcut("demo.slider", Demo.Slider);