components / volume
volume.
level-reflecting icon that mutes, plus a filled slider. range is the general-purpose slider; this is the specific case — muting keeps the value untouched so unmuting restores exactly where you were, and the track can collapse to just the icon until hovered.
with mute
62%
collapsible — hover it
an ending (ascent)
installation
bunx @justin06lee/chrome@latest add volumeprops
| name | type | default | description |
|---|---|---|---|
| value * | number | - | level, 0–1. |
| onChange * | (value: number) => void | - | |
| muted | boolean | false | pass with onMutedChange and the icon becomes a mute toggle. |
| onMutedChange | (muted: boolean) => void | - | |
| collapsible | boolean | false | collapse the slider until the control is hovered or focused. |
| width | number | 80 | track width in px when open. |
| size | 'sm' | 'md' | 'md' | |
| disabled | boolean | false | |
| className | string | - |