Skip to main content

RangeSlider

A range slider with two thumbs that can't crossover. WARNING: Currently not keyboard focusable.

Examples

RangeSlider

View standalone

0

100

Code
<RangeSliderReadExample />

RangeSlider with props

View standalone

2

8

Code
<RangeSliderReadExample
  max={10}
  min={0}
  step={2}
  valueMax={8}
  valueMin={2}
/>

RangeSlider with min/max write inputs

View standalone

Minimum

Maximum

Code
<RangeSliderWriteExample exampleId="3" />

Props

min

number

Default: 0

max

number

Default: 100

step

number

Default: 1

valueMin

number

Default: 0

valueMax

number

Default: 100

minOnChange

(min: number) => void

maxOnChange

(min: number) => void

as

"div"

theme

Theme

loading

"eager" | "lazy"

Not included in `AllHTMLAttributes` yet so sourced from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

decoding

"auto" | "sync" | "async"

Not included in `AllHTMLAttributes` yet so sourced from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

inputRef

Ref<HTMLElement>

Has to not be called ref - done because we also want to use a generic see https://gist.github.com/gaearon/1a018a023347fe1c2476073330cc5509