hightouch UI

Slider

Allow users to make selections from a range of values.

#

#

#

#

#

#

#

#

  • When setting a numerical value within a fixed range.

#

  • Don't use this if the value is unbounded.

#

Inherits margin props.

NameDefaultDescription
isDisabledfalseboolean

Determines if the slider is disabled.

aria-label

—

string

Label that describes the purpose of this slider for screen readers.

value

—

number

The value of the slider in controlled mode.

min0number

Minimum allowed value.

max100number

Maximum allowed value.

step

—

1

The step in which increments/decrements have to be made.

onChange

—

(value: number) => void

Function called whenever the slider value changes (by dragging or clicking).

On this page

  • Example
  • Usage
  • Basic
  • Disabled
  • Custom range
  • Custom step
  • Guidelines
  • When to use
  • When not to use
  • Props