UI Volume Bar - phreaknation/phaserwebcomponents GitHub Wiki

A simple volume bar.

new this.game.PhaserWebComponents.components.UI.VolumeBar({
  game: this.game,
  target: this._.el.controls.querySelector('[data-replace="volumebar"]'),
  events: {
    setVolume: (name, data) => {
      // data.detail.volume: Number between 0 and 1 for the volume.
      // data.detail.percentage: Number between 0 and 100.
      // data.detail.width: Width of the fill bar in pixels.
    }
  },
  options: {
    styles: {
      width: '50px',
      height: '10px',
    }
  }
})