Slider

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 labelTicks, precision handles with precise, and a histogram with hasHistogram.

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

8 samples
1
<calcite-slider value="30"></calcite-slider>
v3.0.3

Accessibility

Slider should be accompanied by a Label, which provides context of the intent to support assistive technologies.

Keyboard navigation

KeyFunction
Arrow leftReduces the component's value by the step (default value is "1").
Arrow rightIncrements the component's value by the step (default value is "1").
Arrow downReduces the component's value by the step (default value is "1").
Arrow upIncrements the component's value by the step (default value is "1").
TabMoves focus in and out of the component. For range values where minValue and maxValue are set and the currently focused item is the minimum value, focus will proceed to the maximum value.
Tab and ShiftMoves focus in and out of the component. For range values where minValue and maxValue are set and the currently focused item is the maximum value, focus will proceed to the minimum value.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
disableddisabledWhen true, interaction is prevented and the component is displayed with lower opacity.booleanfalse
fillPlacementfill-placementUsed 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"
formformThe 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
groupSeparatorgroup-separatorWhen true, number values are displayed with a group separator corresponding to the language and country format.booleanfalse
hasHistogramhas-histogramWhen true, indicates a histogram is present.booleanfalse
histogramA list of the histogram's x,y coordinates within the component's min and max. Displays above the component's track.Array<[number, number]>
histogramStopsA set of single color stops for a histogram, sorted by offset ascending.Array<ColorStop>
labelFormatterWhen specified, allows users to customize handle labels.(value: number, type: "min" | "value" | "max" | "tick", defaultFormatter: (value: number) => string) => string
labelHandleslabel-handlesWhen true, displays label handles with their numeric value.booleanfalse
labelTickslabel-ticksWhen true and ticks is specified, displays label tick marks with their numeric value.booleanfalse
maxmaxThe component's maximum selectable value.number100
maxLabelmax-labelFor multiple selections, the accessible name for the second handle, such as "Temperature, upper bound".string
maxValuemax-valueFor multiple selections, the component's upper value.number
minminThe component's minimum selectable value.number0
minLabelmin-labelAccessible name for first (or only) handle, such as "Temperature, lower bound".string
minValuemin-valueFor multiple selections, the component's lower value.number
mirroredmirroredWhen true, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram.booleanfalse
namenameSpecifies the name of the component. Required to pass the component's value on form submission.string
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
pageSteppage-stepSpecifies the interval to move with the page up, or page down keys.number
precisepreciseWhen true, sets a finer point for handles.booleanfalse
requiredrequiredWhen true and the component resides in a form, the component must have a value in order for the form to submit.booleanfalse
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
snapsnapWhen true, enables snap selection in coordination with step via a mouse.booleanfalse
statusstatusSpecifies the status of the input field, which determines message and icons."idle" | "invalid" | "valid""idle"
stepstepSpecifies the interval to move with the up, or down keys.number1
ticksticksDisplays tick marks on the number line at a specified interval.number
validationIconvalidation-iconSpecifies the validation icon to display under the component.boolean | string
validationMessagevalidation-messageSpecifies the validation message to display under the component.string
validityread-onlyThe 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; }
valuevalueThe component's value.Array<number> | number0

Styles

NameDescription
--calcite-slider-text-colorSpecifies the component's text color.
--calcite-slider-track-colorSpecifies the component's track color.
--calcite-slider-track-fill-colorSpecifies the component's track fill color.
--calcite-slider-handle-fill-colorSpecifies the component's handle fill color.
--calcite-slider-handle-extension-colorSpecifies the component's handle extension color.
--calcite-slider-accent-colorSpecifies the component's accent color.
--calcite-slider-tick-colorSpecifies the component's tick color.
--calcite-slider-tick-border-colorSpecifies the component's tick border color.
--calcite-slider-tick-selected-colorSpecifies the component's tick color when in selected range.
--calcite-slider-graph-colorSpecifies the component's graph color.

Events

NameDescriptionBehavior
calciteSliderChangeFires when the thumb is released on the component. Note: To constantly listen to the drag event, use calciteSliderInput instead.bubblescomposed
calciteSliderInputFires 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.bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
setFocusSets focus on the component.setFocus(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close