A range slider component used to select two numeric values within a range.

base - The base wrapper of the slider.

ticks - The ticks container.

tick-group - The tick group container.

tick - The tick element.

tick-label - The tick label element.

tick-label-inner - The inner element of the tick label.

thumbs - The thumbs container.

thumb - The thumb element.

thumb-label - The thumb tooltip label container.

thumb-label-inner - The thumb tooltip label inner element.

track - The track container.

steps - The track steps element.

inactive - The inactive element of the track.

fill - The filled part of the track.

Callable

  • Returns ReactNode

Events

Emitted when a value change is committed on a thumb drag end or keyboard interaction.

Type declaration

Emitted when a value is changed via thumb drag or keyboard interaction.

Type declaration

Properties

lower: number

The current value of the lower thumb.

thumbLabelLower: string

The aria label for the lower thumb.

thumbLabelUpper: string

The aria label for the upper thumb.

upper: number

The current value of the upper thumb.