hightouch

UI

Getting started

InstallUsageGuidelinesContributeRelease

Foundation

Colors

Layout

BoxColumnRow

Typography

CodeHeadingParagraphSection HeadingText

Navigation

LinkLink Button

Feedback

AlertBadgeDestination BadgeDestination Badge GroupEmpty StateLabel BadgeLabel Badge GroupPillProgress BarSkeletonSpinnerStatsStatus BadgeStatus IndicatorTagToast

Overlay

Confirmation DialogDrawerFilter MenuMenuTooltip

Forms

ButtonButton GroupCheckboxCheckbox GroupClipboard ButtonComboboxEditable DescriptionEditable HeadingFile InputForm FieldIcon ButtonMulti SelectNumber InputRadioSearch InputSelectSliderSlug InputSwitchTag InputTextareaText Input

Other

AvatarCode SnippetTabs

Upsells

Upsell BadgeUpsell ButtonUpsell CardUpsell DialogUpsell HeadingUpsell Success Dialog

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