eui-eui.HSlider

eui.HSlider 使用範例

exml部分

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.MySkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" verticalCenter="0">
        <!-- 橫向滑軌數值0~100 -->
        <e:HSlider id="mySlider" minimum="0" maximum="100">
            <e:Skin>
                <e:Group width="500">
                    <!-- 軌道（記得 id = track 一定要加） -->
                    <e:Rect id="track" fillColor="0xFFFFFF" height="3" width="100%" verticalCenter="0" />
                    <!-- 滑鈕軌跡高亮（記得 id = trackHighlight 一定要加） -->
                    <e:Rect id="trackHighlight" fillColor="0xFFCC00" height="3" verticalCenter="0" />
                    <!-- 滑鈕（記得 id = thumb 一定要加） -->
                    <e:Rect id="thumb" fillColor="0x333333" height="30" width="30" ellipseWidth="30" ellipseHeight="30"
                            verticalCenter="0" />
                </e:Group>
            </e:Skin>
        </e:HSlider>
    </e:Group>
</e:Skin>

ts部分

class My extends eui.Component {

    /** 可直接取用 id 元件 */
    private readonly mySlider: eui.HSlider;

    protected createChildren() {
        super.createChildren();
        // 跟 MySkin 建立關聯
        this.skinName = skins.MySkin;
        // CHANGE 事件註冊
        this.mySlider.addEventListener(eui.UIEvent.CHANGE, (e:eui.UIEvent) => console.log(e.currentTarget.value), this);
    }

}