Range
A Range lets users choose a single number between two values by using a slider.
- To choose a number within a range with minimum and maximum values
How to use it
Default
A Range has one thumb. Its label is part of its touch target.
Disabled
A disabled Range is not interactive, and not perceived by a screen reader.
Hidden label
Range labels can be hidden.
Hint text
Hint adds additional context to the Range label.
Validation
Success, warning, or danger validation messages are shown using the Message component.
Configuration
- Name9.5.3•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Range, Field } from '@zendeskgarden/react-forms'
API
The Range component follows this structure:
<Field><Field.Label /><Field.Hint /><Range /><Field.Message /></Field>
Field
A Field provides accessibility attributes to its child Range field by associating it with the corresponding Field.Label and Field.Hint.
Field.Hint
Extends HTMLAttributes<HTMLDivElement>
Nest the Hint within a Field component.
Field.Label
Extends LabelHTMLAttributes<HTMLLabelElement>
Nest the Label within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
hidden | boolean | Hides the label visually without hiding it from screen readers | |
isRegular | boolean | Applies regular (non-bold) font weight |
Field.Message
Extends HTMLAttributes<HTMLDivElement>
The Message component applies appropriate icon and styles based on the validation provided. Nest it within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | 'success' | 'warning' | 'error' | Applies validation state styling | |
validationLabel | string | Defines the aria-label for the validation icon |
Range
Extends InputHTMLAttributes<HTMLInputElement>
Nest a Range within a Field component.