EUI HSlider 实现音量控制

一 HSlider使用

直接拖动到exml上，并赋值默认皮肤。记得要设置宽度，不然只能看到一个按钮，看不到条。

皮肤源码：

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="skins.HSliderSkin" minWidth="" minHeight="" xmlns:e="http://ns.egret.com/eui">
    <e:Image id="track" source="track_sb_png" scale9Grid="1,1,4,4" width="100%" height="" verticalCenter=""/>
    <e:Image id="thumb" source="thumb_png" verticalCenter=""/>
</e:Skin>

拖动按钮时，获取value值，可以根据这个value值去改变音量。

private slider:eui.HSlider;
public constructor() {
    super();
    this.skinName = "HomeSceneSkin";
}

public childrenCreated(){
    this.slider.snapInterval = 0.1; //范围0-10，间隔0.1，则有100个值
    this.slider.addEventListener(egret.Event.CHANGE, this.onChange, this);
}

private onChange(){
    console.log(this.slider.value); //0 0.1 0.2...
}

二 减少皮肤数量，单次使用直接在exml代码里赋值皮肤

可以更换滑块和进度条的source来替换图片，设置九宫等属性来改变样式。

<e:HSlider id="slider" x="" y="" width="" minWidth="" minHeight="">
    <e:Skin minWidth="" minHeight="" xmlns:e="http://ns.egret.com/eui">
        <e:Image id="track" source="track_sb_png" scale9Grid="1,1,4,4" width="100%" height="" verticalCenter=""/>
        <e:Image id="thumb" source="thumb_png" verticalCenter=""/>
    </e:Skin>
</e:HSlider>