Slider

Use the slider component to allow users to select a numeric value from a range by dragging a thumb along a track.

Package: @terreno/ui
Categories: Component
Props interface: SliderProps
Story source: demo/stories/Slider.stories.tsx

Live demo

Live preview from the Terreno component demoOpen in playground ↗

Props

Prop	Type	Required	Description
onChange	reflection	Yes	The function to call when the slider value changes.
value	number	Yes	The current value of the slider.
disabled	boolean		If true, the slider will be disabled.
errorText	string
helperText	string
inlineLabels	boolean		If true, displays min and max labels inline on both ends of the track.
labels	reflection		Labels to show below the slider track.
maximumTrackTintColor	string		The color of the track to the right of the thumb.
maximumValue	number		The maximum value of the slider.
minimumTrackTintColor	string		The color of the track to the left of the thumb.
minimumValue	number		The minimum value of the slider.
showSelection	boolean		If true, the slider will show the current value as text.
step	number		The step value of the slider.
thumbTintColor	string		The color of the thumb.
title	string		The title of the slider field.
useIcons	boolean		If true, icons will be displayed instead of numeric values when valueMapping is provided.
valueMapping	array		Graphics/icons to display instead of numeric values. Maps slider values to icon names or any string.