Sliders

Drag a handle along a track to get a value from 0 to 1.

What zStudio needs

Set the container type to Slider and give it these two children. The width of track sets how far the handle can travel. Sliders are horizontal.

volumeSlider (Slider)
├─ track     the background bar
└─ handle    the part you drag

Use it

const volume = stage.get('volumeSlider') as ZSlider;

// value goes from 0 (left) to 1 (right)
volume.setCallback((value) => {
  audio.volume = value;
});

// Move the handle from code. This also runs your callback.
volume.setHandlePosition(0.75);

Restore a saved value without side effects

There's no silent way to set the position, and no method to read the value back. Set the position before you attach your callback, and keep the current value yourself.

let currentVolume = savedSettings.volume;

volume.setHandlePosition(currentVolume); // no callback attached yet
volume.setCallback((value) => {
  currentVolume = value;
  audio.volume = value;
});