Slider
Calcite Sliders are used to set linear values while providing intuitive visual feedback.
Overview
Sliders allow users to view a selected value or range of information. Additionally, they provide a visual indicator (handle) of the current value or range, which is adjustable. This allows the user to increase or decrease the value(s) by moving the Slider's handle along a horizontal track.
Helpful props include the ability to add notches, labels, precision handles, and a histogram.
Usage
- When offering the user a numeric adjustable value or range
- Adjusting a buffer area
- Opacity or transparency control
- Volume control
- Adjusting or setting map extent
- Video timeline
Sample
Sliders are highly configurable - combine options to support ranges, display and label tick marks, and more.
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| disabled | disabled | Disable and gray out the slider | truefalse | |
| hasHistogram | has-histogram | Indicates if a histogram is present | truefalse | |
| histogram | List of x,y coordinates within the slider's min and max, displays above the slider track. | Point[] | ||
| histogramStops | Array of values describing a single color stop, sorted by offset ascending. | ColorStop[] | ||
| labelHandles | label-handles | Label handles with their numeric value | truefalse | |
| labelTicks | label-ticks | Label tick marks with their numeric value. | truefalse | |
| max | max | Maximum selectable value | 100 (default) | |
| maxLabel | max-label | Used as an accessible label (aria-label) for second handle if needed (ex. "Temperature, upper bound") | undefined | |
| maxValue | max-value | Currently selected upper number (if multi-select) | undefined | |
| min | min | Minimum selectable value | 0 (default) | |
| minLabel | min-label | Used as an accessible label (aria-label) for first (or only) handle (ex. "Temperature, lower bound") | undefined | |
| minValue | min-value | Currently selected lower number (if multi-select) | undefined | |
| mirrored | mirrored | When true, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. | truefalse | |
| name | name | The name of the slider | undefined | |
| pageStep | page-step | Interval to move on page up/page down keys | undefined | |
| precise | precise | Use finer point for handles | truefalse | |
| required | required | When true, makes the component required for form-submission. | truefalse | |
| scale | scale | Specify the scale of the slider, defaults to m | lm (default)s | |
| snap | snap | When true, enables snap selection along the step interval | truefalse | |
| step | step | Interval to move on up/down keys | 1 (default) | |
| ticks | ticks | Show tick marks on the number line at provided interval | undefined | |
| value | value | Currently selected number (if single select) |
Events
| Name | Description | Detail |
|---|---|---|
| calciteSliderChange | Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead | any |
| calciteSliderInput | Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. | any |
| calciteSliderUpdate | Fires on all updates to the slider. :warning: Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. | any |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| setFocus | Sets focus on the component. | setFocus() => Promise<void> | Promise<void> |