Multi-thumb range
A Multi-thumb range lets users define a range between two values by using a slider.
Used for this
- To define a range of numbers between a minimum and maximum
Not for this
- To choose a single number between two values, use a Range instead
How to use it
Default
A Multi-thumb range has two thumbs.
Disabled
A disabled Multi-thumb range prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not be read aloud by a screenreader.
Hidden label
Multi-thumb range labels can be hidden.
Hint text
Add context to the Multi-thumb range label using Hint.
Validation
Show success, warning, and danger validation messages with 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, MultiThumbRange } 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 |
MultiThumbRange
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
max | number | 100 | Sets the maximum permitted value |
maxValue | number | 100 | Sets the maximum thumb input value |
min | number | – | Sets the minimum permitted value |
minValue | number | – | Sets the minimum thumb input value |
onChange | – | Handles change events Parameters updatedValues The values that have changed | |
step | number | 1 | Defines the stepping interval |