Range
A Range lets users choose a single number between two values by using a slider.
Used for this
- To choose a number within a range with minimum and maximum values
Not for this
- If the choices aren’t in a continuous range, use a Menu instead
- To compare between several options, use a Radio instead
- To define a range of values, use a Multi-thumb range instead
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
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Field, Hint, Label, Message, Range } from '@zendeskgarden/react-forms'
API
Field
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
id | string | – | Sets the field ID and the prefix for the generated label, input, and hint IDs |
Hint
Extends HTMLAttributes<HTMLDivElement>
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | – | Applies regular (non-bold) font weight |
Message
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
validation | VALIDATION | – | Applies validation state styling |
Range
Extends InputHTMLAttributes<HTMLInputElement>