Compare Slider

A compound component for before/after comparison. Drag the handle, or focus the slider and use the arrow keys, Page Up/Down, Home and End.

Default

Horizontal orientation with drag interaction.

Labels

Passing `label` renders a CompareSliderLabel and wires it up as the accessible name for that side.

Vertical orientation

orientation="vertical" swaps the clip axis and the handle chevrons. Arrow Up/Down drive it.

Hover interaction

interaction="hover" tracks the pointer without a press, and hides the grab handle.

Controlled

Drive it from state with `value` + `onValueChange`. The range input below is an external control writing the same value.

35%