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

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

Sliders are highly configurable - combine options to support ranges, display and label tick marks, and more.

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

API reference

calcite-slider
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
disableddisabled

Disable and gray out the slider

booleanA boolean property should be present, or not
truefalse
hasHistogramhas-histogram

Indicates if a histogram is present

booleanA boolean property should be present, or not
truefalse
histogram

List of x,y coordinates within the slider's min and max, displays above the slider track.

optional
typedChoose from a set of typed values
Point[]View documentation
histogramStops

Array of values describing a single color stop, sorted by offset ascending.

typedChoose from a set of typed values
ColorStop[]
labelHandleslabel-handles

Label handles with their numeric value

booleanA boolean property should be present, or not
truefalse
labelTickslabel-ticks

Label tick marks with their numeric value.

booleanA boolean property should be present, or not
truefalse
maxmax

Maximum selectable value

numberA number
100 (default)
maxLabelmax-label

Used as an accessible label (aria-label) for second handle if needed (ex. "Temperature, upper bound")

optional
stringA custom string
undefined
maxValuemax-value

Currently selected upper number (if multi-select)

optional
numberA number
undefined
minmin

Minimum selectable value

numberA number
0 (default)
minLabelmin-label

Used as an accessible label (aria-label) for first (or only) handle (ex. "Temperature, lower bound")

stringA custom string
undefined
minValuemin-value

Currently selected lower number (if multi-select)

optional
numberA number
undefined
mirroredmirrored

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.

booleanA boolean property should be present, or not
truefalse
namename

The name of the slider

stringA custom string
undefined
pageSteppage-step

Interval to move on page up/page down keys

optional
numberA number
undefined
preciseprecise

Use finer point for handles

booleanA boolean property should be present, or not
truefalse
requiredrequired

When true, makes the component required for form-submission.

booleanA boolean property should be present, or not
truefalse
scalescale

Specify the scale of the slider, defaults to m

typedChoose from a set of typed values
lm (default)s
snapsnap

When true, enables snap selection along the step interval

booleanA boolean property should be present, or not
truefalse
stepstep

Interval to move on up/down keys

optional
numberA number
1 (default)
ticksticks

Show tick marks on the number line at provided interval

optional
numberA number
undefined
valuevalue

Currently selected number (if single select)

typedChoose from a set of typed values

Events

NameDescriptionDetail
calciteSliderChange

Fires on when the thumb is released on slider If you need to constantly listen to the drag event, please use calciteSliderInput instead

bubblescomposedcancelable
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.

bubblescomposedcancelable
any
calciteSliderUpdate
deprecateduse calciteSliderInput instead

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.

bubblescomposedcancelable
any

Methods

NameDescriptionSignatureReturns
setFocus

Sets focus on the component.

setFocus() => Promise<void>Promise<void>

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