Multi-thumb range
A Multi-thumb range lets users define a range between two values by using a slider.
Garden does not presently recommend the use of Multi-thumb ranges.
- To define a range of numbers between a minimum and maximum
- 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.76.4•View source•View on npm
- Installnpm install @zendeskgarden/react-forms
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { MultiThumbRange, Field, Hint, Label, Message } from '@zendeskgarden/react-forms'
API
The MultiThumbRange component follows this structure:
<Field><Label /><Hint /><MultiThumbRange /><Message /></Field>
Field
Extends HTMLAttributes<HTMLDivElement>
A Field provides accessibility attributes to its child MultiThumbRange field by associating it with the corresponding Label and Hint.
Hint
Extends HTMLAttributes<HTMLDivElement>
Nest the Hint within a Field component.
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 |
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 |
MultiThumbRange
Extends HTMLAttributes<HTMLDivElement>
Nest a MultiThumbRange within a Field component.
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
jump | number | – | Defines the jumping interval for keyboard page up/down navigation. Defaults to step. |
max | number | 100 | Sets the maximum permitted value |
maxValue | number | – | Sets the maximum thumb value |
min | number | – | Sets the minimum permitted value |
minValue | number | – | Sets the minimum thumb value |
onChange | – | Handles change events Parameters updatedValues The values that have changedupdatedValues.minValue The optional minimum valueupdatedValues.maxValue The optional maximum value | |
step | number | 1 | Defines the stepping interval |