Ⓔeui.HSlider 用法

HSlider 可做音量調節器

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" 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>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private mySlider: eui.HSlider;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;
            // CHANGE 事件註冊
            this.mySlider.addEventListener(eui.UIEvent.CHANGE, () => console.log(this.mySlider.value), this);
        }

    }

}