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. Sliders provide a visual indicator, or handle of the current value, which is adjustable. This allows the user to increase or decrease the value(s) by moving the Slider's handle along a horizontal track.
Configurable properties support the ability to add ticks
, labels with label
, precision handles with precise
, and a histogram with has
.
Usage
- When offering the user a numeric adjustable value or range
- Adjusting a buffer area
- Opacity or transparency control
- Volume control
- Adjusting or setting a map extent
- A video timeline
Sample
<calcite-slider value="30"></calcite-slider>
Accessibility
Slider should be accompanied by a Label, which provides context of the intent to support assistive technologies.
Keyboard navigation
Key | Function |
---|---|
Arrow left | Reduces the component's value by the step (default value is "1" ). |
Arrow right | Increments the component's value by the step (default value is "1" ). |
Arrow down | Reduces the component's value by the step (default value is "1" ). |
Arrow up | Increments the component's value by the step (default value is "1" ). |
Tab | Moves focus in and out of the component. For range values where min and max are set and the currently focused item is the minimum value, focus will proceed to the maximum value. |
Tab and Shift | Moves focus in and out of the component. For range values where min and max are set and the currently focused item is the maximum value, focus will proceed to the minimum value. |
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
fillPlacement | fill-placement | Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. | "end" | "none" | "start" | "start" |
form | form | The id of the form that will be associated with the component.
When not set, the component will be associated with its ancestor form element, if any. | string | |
groupSeparator | group-separator | When true , number values are displayed with a group separator corresponding to the language and country format. | boolean | false |
hasHistogram | has-histogram | When true , indicates a histogram is present. | boolean | false |
histogram | A list of the histogram's x,y coordinates within the component's min and max . Displays above the component's track. | Array<[number, number]> | ||
histogramStops | A set of single color stops for a histogram, sorted by offset ascending. | Array<ColorStop> | ||
labelFormatter | When specified, allows users to customize handle labels. | (value: number, type: "min" | "value" | "max" | "tick", defaultFormatter: (value: number) => string) => string | ||
labelHandles | label-handles | When true , displays label handles with their numeric value. | boolean | false |
labelTicks | label-ticks | When true and ticks is specified, displays label tick marks with their numeric value. | boolean | false |
max | max | The component's maximum selectable value. | number | 100 |
maxLabel | max-label | For multiple selections, the accessible name for the second handle, such as "Temperature, upper bound" . | string | |
maxValue | max-value | For multiple selections, the component's upper value. | number | |
min | min | The component's minimum selectable value. | number | 0 |
minLabel | min-label | Accessible name for first (or only) handle, such as "Temperature, lower bound" . | string | |
minValue | min-value | For multiple selections, the component's lower value. | number | |
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. | boolean | false |
name | name | Specifies the name of the component.
Required to pass the component's value on form submission. | string | |
numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
pageStep | page-step | Specifies the interval to move with the page up, or page down keys. | number | |
precise | precise | When true , sets a finer point for handles. | boolean | false |
required | required | When true and the component resides in a form,
the component must have a value in order for the form to submit. | boolean | false |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
snap | snap | When true , enables snap selection in coordination with step via a mouse. | boolean | false |
status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | "idle" |
step | step | Specifies the interval to move with the up, or down keys. | number | 1 |
ticks | ticks | Displays tick marks on the number line at a specified interval. | number | |
validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | |
validationMessage | validation-message | Specifies the validation message to display under the component. | string | |
validity | The current validation state of the component. | {
valid: boolean;
badInput: boolean;
customError: boolean;
patternMismatch: boolean;
rangeOverflow: boolean;
rangeUnderflow: boolean;
stepMismatch: boolean;
tooLong: boolean;
tooShort: boolean;
typeMismatch: boolean;
valueMissing: boolean;
} | ||
value | value | The component's value. | Array<number> | number | 0 |
Styles
Name | Description |
---|---|
--calcite-slider-text-color | Specifies the component's text color. |
--calcite-slider-track-color | Specifies the component's track color. |
--calcite-slider-track-fill-color | Specifies the component's track fill color. |
--calcite-slider-handle-fill-color | Specifies the component's handle fill color. |
--calcite-slider-handle-extension-color | Specifies the component's handle extension color. |
--calcite-slider-accent-color | Specifies the component's accent color. |
--calcite-slider-tick-color | Specifies the component's tick color. |
--calcite-slider-tick-border-color | Specifies the component's tick border color. |
--calcite-slider-tick-selected-color | Specifies the component's tick color when in selected range. |
--calcite-slider-graph-color | Specifies the component's graph color. |
Events
Name | Description | Behavior |
---|---|---|
calciteSliderChange | Fires when the thumb is released on the component.
Note: To constantly listen to the drag event,
use calciteSliderInput instead. | |
calciteSliderInput | Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |