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 theadvanced 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, |
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 |
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 |
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 |
Last updated