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 | true false | |
hasHistogram | has-histogram | Indicates if a histogram is present | true false | |
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 | true false | |
labelTicks | label-ticks | Label tick marks with their numeric value. | true false | |
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. | true false | |
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 | true false | |
required | required | When true, makes the component required for form-submission. | true false | |
scale | scale | Specify the scale of the slider, defaults to m | l m (default) s | |
snap | snap | When true, enables snap selection along the step interval | true false | |
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> |