Comment on page

Slider

Select a single value or specify a range by choosing values for both its ends.

Overview
The Slider component is a user-friendly way to select a value from a range. It consists of a track with a handle that can be moved along the track to select a value. The Slider component is commonly used for tasks such as adjusting the volume of a media player or setting a number within a specific range.
Here are some of the key features of the Slider component:
User-friendly
Interactive
Allows users to select a value from a range
Commonly used for tasks such as adjusting the volume of a media player or selecting a number within a specific range
Changing the Properties
Here are the main properties you can configure on the Slider element
Multiple values
A slider can contain multiple values and specify a range between two or more numbers.
Choosing a Type
The Type attribute will determine the orientation of the slider. The Slider type can be horizontal or vertical. 
Adjusting Steps
By default, the increment value of the slider is set to 1 but you can customize the increment value of the slider by adding an incrementing number to the step property.
Adding Min/Max values
Min and Max values can be specified to customize the range of your slider.
Setting a unit
By default, the slider's unit is set to decimal. But the unit can be customized to Currency, Percent or Custom. 
Advanced Options
Show Pin
To show a pin when the slider is moving.
Show Tick Marks
when there is steps
Disable swap
​
Adding Interactions
Interactions define what will happen when users interact with the slider component. You can find a list of interactions available here.
Here are the available interactions for the Slider component:
On Change: The event fired when the slider value changed.
Styling the Slider
From the Styles panel, you can customize styling attributes for the Slider component: 
Label: to customize the label that is displayed on top of the slider.
Unit: to customize the unit label.
Track: to customize the track styling.
Pin: to customize the style of the Pin if enabled in the advanced options.
Thumb: to customize the style of the slider thumb.
Examples
Specifications
Attributes
Name
Type
Description
disabled
Boolean
If present, the slider thumbs can swap order.
disableSwap
Boolean
If present, the slider is disabled and users cannot interact with it.
hideMinMaxValues
Boolean
If present, min and max value indicators are removed.
hideTrack
Boolean
If present, track is removed.
multipleValues
Boolean
​
label
String
Text label to describe the slider. Provide your own label to describe the slider.
max
Integer
The maximum value of the input slider.
min
Integer
The minimum value of the input slider.
minimumDistance
Integer
The minimum distance between nodes when swap is disabled and there are many nodes.
showPin
Boolean
If present, a pin containing the value is shown when the thumb is pressed.
showTickMarks
Boolean
If present, minor tick marks are displayed at every step.
size
String
Size of the slider. Accepted values are responsive, x-small, small, medium, and large.
step
Integer
The step increment value of the input slider. Example steps include 0.1, 1, or 10.
tickMarkStyle
String
If present, tick marks are displayed with the according style. Accepted styles are inner-tick, tick, dot.
type
String
The type determines the orientation of the slider. Accepted values are vertical and horizontal.
unit
String
Format the value displayed. Accepted units include decimal, currency, percent and custom. See Units and Unit Attributes table for more details.
unitAttributes
Object
Attributes specific to the selected unit. See Units and Unit Attributes table for more details.
value
Integer
The value of the slider. If multiple values are given, slider will have multiple thumbs, one for each value.
variant
String
The variant changes the appearance of the slider. Accepted variants include standard and label-hidden. The default is standard.
Events
Name
Description
change
The event fired when the slider value changed.
Styling Hooks
Label
Name
Description
Text Color
Customize the label text color
Font Size
Customize the label font size
Font Style
Customize the label font style
Font Weight
Customize the label font weight
Unit
Name
Description
Text Color
Customize the unit text color
Font Size
Customize the unit font size
Font Style
Customize the unit font style
Font Weight
Customize the unit font weight
Track
​
Name
Description
Color
Customize the track color
Background Color
Customize the track background color
Height
Customize the track height
Border Radius
Customize the track border radius
Pin
Name
Description
Text Color
Customize the pin text color
Background Color
Customize the pin background color
Border Radius
Customize the pin border radius
Thumb
Name
Description
Text Color
Customize the thumb text color
Text Color Hover
Customize the thumb text color hover
Width
Customize the thumb width
Border Radius
Customize the thumb border radius

Name	Type	Description
disabled	Boolean	If present, the slider thumbs can swap order.
disableSwap	Boolean	If present, the slider is disabled and users cannot interact with it.
hideMinMaxValues	Boolean	If present, min and max value indicators are removed.
hideTrack	Boolean	If present, track is removed.
multipleValues	Boolean
label	String	Text label to describe the slider. Provide your own label to describe the slider.
max	Integer	The maximum value of the input slider.
min	Integer	The minimum value of the input slider.
minimumDistance	Integer	The minimum distance between nodes when swap is disabled and there are many nodes.
showPin	Boolean	If present, a pin containing the value is shown when the thumb is pressed.
showTickMarks	Boolean	If present, minor tick marks are displayed at every step.
size	String	Size of the slider. Accepted values are responsive, `x-small`, `small`, `medium`, and `large`.
step	Integer	The step increment value of the input slider. Example steps include 0.1, 1, or 10.
tickMarkStyle	String	If present, tick marks are displayed with the according style. Accepted styles are `inner-tick`, `tick`, `dot`.
type	String	The type determines the orientation of the slider. Accepted values are vertical and horizontal.
unit	String	Format the value displayed. Accepted units include decimal, currency, percent and custom. See Units and Unit Attributes table for more details.
unitAttributes	Object	Attributes specific to the selected unit. See Units and Unit Attributes table for more details.
value	Integer	The value of the slider. If multiple values are given, slider will have multiple thumbs, one for each value.
variant	String	The variant changes the appearance of the slider. Accepted variants include `standard` and `label-hidden`. The default is standard.

Name	Description
change	The event fired when the slider value changed.

Name	Description
Text Color	Customize the label text color
Font Size	Customize the label font size
Font Style	Customize the label font style
Font Weight	Customize the label font weight

Name	Description
Text Color	Customize the unit text color
Font Size	Customize the unit font size
Font Style	Customize the unit font style
Font Weight	Customize the unit font weight

Name	Description
Color	Customize the track color
Background Color	Customize the track background color
Height	Customize the track height
Border Radius	Customize the track border radius

Name	Description
Text Color	Customize the pin text color
Background Color	Customize the pin background color
Border Radius	Customize the pin border radius

Name	Description
Text Color	Customize the thumb text color
Text Color Hover	Customize the thumb text color hover
Width	Customize the thumb width
Border Radius	Customize the thumb border radius

Last modified 2mo ago