EUI HSlider 实现音量控制

一 HSlider使用

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

皮肤源码：

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="skins.HSliderSkin" minWidth="20" minHeight="8" xmlns:e="http://ns.egret.com/eui">
    <e:Image id="track" source="track_sb_png" scale9Grid="1,1,4,4" width="100%" height="6" verticalCenter="0"/>
    <e:Image id="thumb" source="thumb_png" verticalCenter="0"/>
</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="122" y="49" width="202" minWidth="20" minHeight="8">
    <e:Skin minWidth="20" minHeight="8" xmlns:e="http://ns.egret.com/eui">
        <e:Image id="track" source="track_sb_png" scale9Grid="1,1,4,4" width="100%" height="6" verticalCenter="0"/>
        <e:Image id="thumb" source="thumb_png" verticalCenter="0"/>
    </e:Skin>
</e:HSlider>