Large/Thick Slider for React

The slider's class sets h-3 on the part with data-slot="slider-track" and size-6 on the part with data-slot="slider-thumb".

The value lives in state, starting at 55, and goes back to the slider as value. The percentage beside the label prints it. onValueChange receives the new value, and the handler stores it as an array.

The h-3 only thickens a horizontal track. A vertical one needs w-3 on the track instead.

The Volume text is a visible Label, and the slider gets the same name with aria-label, so screen readers announce what it sets. On Base UI, aria-label is one string on the slider.

0 to 100. min and max set the ends.

Yes. The thumb takes focus with Tab. The arrow keys move it by one step, Page Up and Page Down by a larger step, and Home and End jump to the ends.