Slider
Slider
enables the selection of a single value within a range of values. It offers inline label positioning and marks displayed under the track.
Selection of a single value from a Slider
track. A tooltip displays the value of the Slider
"thumb" when the thumb is focused or hovered.
Slider
's labels indicate the minimum and maximum values of the range, and can be located inline with the Slider
using the minLabel
and maxLabel
props or they can be located at the bottom of the Slider
using the marks
prop.
To make the Slider
accessible, ensure screen readers can accurately convey the range and its values. While screen readers announce the default minimum and maximum values, customizing labels with minLabel
and maxLabel
is best paired with updating screen reader text using accessibleMinText
and accessibleMaxText
. These props let you define the exact text announced for the minimum and maximum values, ensuring alignment with custom labels. For instance, if minLabel
is "Low" and maxLabel
is "High," set accessibleMinText
to "Low" and accessibleMaxText
to "High" for a more intuitive experience for assistive technology users.
You can use the constrainLabelPosition
prop to ensure that the bottom labels remain within the Slider
's boundaries. When set to true
, it prevents labels from extending beyond the Slider
, maintaining a tidy and consistent appearance. This is particularly useful for preserving layout integrity and ensuring label readability across various screen sizes.
Note: Enabling constrainLabelPosition
may lead to inconsistent spacing between marks. Use this option carefully to balance visual clarity and distribution.
You can display marks under the Slider
track to label specific values. The showTicks
property allows you to display small ticks above the marks, enhancing visual guidance for users by providing clear reference points along the track. This feature improves usability by making it easier for users to select precise values.
You can combine marks
with minLabel
and maxLabel
to provide even more context regarding the Slider
.
To add non-numeric marks
to certain values, please refer to the example with non-numeric values below.
The restrictToMarks
property, when set to true
, confines the Slider
's movement to predefined values specified in the marks
array. This means that the Slider
can only stop at these specific values, rather than any arbitrary value along the Slider
's range. The step
property is ignored in this case.
You can set the Slider
as disabled.
By default, the Slider
step increment is set to 1. This can be customized by using the step
prop. Custom step values can be set to any number, including decimal values up to two decimal places.
We recommend (max - min) to be evenly divisible by the step to ensure that all values of the Slider
are reachable.
You can pass a callback function to the format()
prop to format the display values in the tooltip. This format()
callback will also be applied to screen reader announcements to ensure accessibility. You can use the format()
callback to to display units or currency.
When formatting the values, it is recommended to add the same formatting to the marks if passed.
You can wrap the Slider
in a form field and display a label. For more information, refer to the form field documentation.
You can display inputs with the Slider
. Inputs are used to enter a numeric value from the predefined range, enabling the thumb to jump to the specified value.
"Out of range" changes to the value (i.e. setting the input to a value above or below the slider's min
and max
values) will be rounded to the nearest valid value for the Slider
.
- Display one input to the left of the track.
- When using inputs, ensure the
Slider
state is controlled (by explicitly setting thevalue
prop). - Use the
Slider
'sonChange
callback to update the input values when theSlider
is interacted with. - Validate your input value changes and update the
validationStatus
prop on any inputs accordingly. - Only use the inline labels of the
Slider
alongside an input via thelabelPosition
. This ensures the size-base alignment of the overall component layout is maintained.
To hide the tooltip when hovering over the Slider thumb, you can use the showTooltip
prop. This is beneficial in cases where your Slider already conveys enough information, eliminating the need for a tooltip.
You can implement a Slider
that allows users to select non-numeric values with the help of the format()
callback and with a focus on accessibility through the use of aria-valuetext
.
The Slider
maps numeric values to meaningful non-numeric options, enabling intuitive selection beyond simple numbers. The aria-valuetext
attribute is, by default, dynamically updated based on the format()
callback to announce the selected option, providing clear feedback for users with assistive technologies. You also have the choice to update the aria-valuetext
attribute via props.
- Create a controlled slider and use your
format()
callback to create formattedmarks
. - Update
aria-valuetext
with the formatted current slider value. - Make the
marks
responsive on smaller screens by implementing logic to render them based on breakpoints.
This approach ensures a user-friendly and accessible interface for selecting non-numeric values.
The Slider
component provides two key event handlers: onChange
and onChangeEnd
, which are essential for handling user interactions with the Slider
, whether through mouse or keyboard input.
onChange
Event: This event is triggered continuously as the user drags theSlider
thumb or adjusts it using keyboard controls. It provides real-time feedback by updating the value as the thumb moves or as keyboard inputs modify the value. This is particularly useful for scenarios where you want to display dynamic changes or provide immediate feedback to the user, such as updating a preview or displaying the current value.onChangeEnd
Event: This event is fired once the user releases theSlider
thumb or adjusts it using keyboard controls, indicating the end of the interaction. It is ideal for scenarios where you want to perform actions that should only occur after the user has finished adjusting theSlider
, such as submitting a value, triggering a calculation, or updating a state that should not be changed continuously.
Note: Both onChange
and onChange
events will be triggered simultaneously when the Slider
is interacted with using a keyboard.
Selection of a single value from a Slider
track. A tooltip displays the value of the Slider
"thumb" when the thumb is focused or hovered.
Slider
's labels indicate the minimum and maximum values of the range, and can be located inline with the Slider
using the minLabel
and maxLabel
props or they can be located at the bottom of the Slider
using the marks
prop.
To make the Slider
accessible, ensure screen readers can accurately convey the range and its values. While screen readers announce the default minimum and maximum values, customizing labels with minLabel
and maxLabel
is best paired with updating screen reader text using accessibleMinText
and accessibleMaxText
. These props let you define the exact text announced for the minimum and maximum values, ensuring alignment with custom labels. For instance, if minLabel
is "Low" and maxLabel
is "High," set accessibleMinText
to "Low" and accessibleMaxText
to "High" for a more intuitive experience for assistive technology users.
You can use the constrainLabelPosition
prop to ensure that the bottom labels remain within the Slider
's boundaries. When set to true
, it prevents labels from extending beyond the Slider
, maintaining a tidy and consistent appearance. This is particularly useful for preserving layout integrity and ensuring label readability across various screen sizes.
Note: Enabling constrainLabelPosition
may lead to inconsistent spacing between marks. Use this option carefully to balance visual clarity and distribution.
You can display marks under the Slider
track to label specific values. The showTicks
property allows you to display small ticks above the marks, enhancing visual guidance for users by providing clear reference points along the track. This feature improves usability by making it easier for users to select precise values.
You can combine marks
with minLabel
and maxLabel
to provide even more context regarding the Slider
.
To add non-numeric marks
to certain values, please refer to the example with non-numeric values below.
The restrictToMarks
property, when set to true
, confines the Slider
's movement to predefined values specified in the marks
array. This means that the Slider
can only stop at these specific values, rather than any arbitrary value along the Slider
's range. The step
property is ignored in this case.
You can set the Slider
as disabled.
By default, the Slider
step increment is set to 1. This can be customized by using the step
prop. Custom step values can be set to any number, including decimal values up to two decimal places.
We recommend (max - min) to be evenly divisible by the step to ensure that all values of the Slider
are reachable.
You can pass a callback function to the format()
prop to format the display values in the tooltip. This format()
callback will also be applied to screen reader announcements to ensure accessibility. You can use the format()
callback to to display units or currency.
When formatting the values, it is recommended to add the same formatting to the marks if passed.
You can wrap the Slider
in a form field and display a label. For more information, refer to the form field documentation.
You can display inputs with the Slider
. Inputs are used to enter a numeric value from the predefined range, enabling the thumb to jump to the specified value.
"Out of range" changes to the value (i.e. setting the input to a value above or below the slider's min
and max
values) will be rounded to the nearest valid value for the Slider
.
- Display one input to the left of the track.
- When using inputs, ensure the
Slider
state is controlled (by explicitly setting thevalue
prop). - Use the
Slider
'sonChange
callback to update the input values when theSlider
is interacted with. - Validate your input value changes and update the
validationStatus
prop on any inputs accordingly. - Only use the inline labels of the
Slider
alongside an input via thelabelPosition
. This ensures the size-base alignment of the overall component layout is maintained.
To hide the tooltip when hovering over the Slider thumb, you can use the showTooltip
prop. This is beneficial in cases where your Slider already conveys enough information, eliminating the need for a tooltip.
You can implement a Slider
that allows users to select non-numeric values with the help of the format()
callback and with a focus on accessibility through the use of aria-valuetext
.
The Slider
maps numeric values to meaningful non-numeric options, enabling intuitive selection beyond simple numbers. The aria-valuetext
attribute is, by default, dynamically updated based on the format()
callback to announce the selected option, providing clear feedback for users with assistive technologies. You also have the choice to update the aria-valuetext
attribute via props.
- Create a controlled slider and use your
format()
callback to create formattedmarks
. - Update
aria-valuetext
with the formatted current slider value. - Make the
marks
responsive on smaller screens by implementing logic to render them based on breakpoints.
This approach ensures a user-friendly and accessible interface for selecting non-numeric values.
The Slider
component provides two key event handlers: onChange
and onChangeEnd
, which are essential for handling user interactions with the Slider
, whether through mouse or keyboard input.
onChange
Event: This event is triggered continuously as the user drags theSlider
thumb or adjusts it using keyboard controls. It provides real-time feedback by updating the value as the thumb moves or as keyboard inputs modify the value. This is particularly useful for scenarios where you want to display dynamic changes or provide immediate feedback to the user, such as updating a preview or displaying the current value.onChangeEnd
Event: This event is fired once the user releases theSlider
thumb or adjusts it using keyboard controls, indicating the end of the interaction. It is ideal for scenarios where you want to perform actions that should only occur after the user has finished adjusting theSlider
, such as submitting a value, triggering a calculation, or updating a state that should not be changed continuously.
Note: Both onChange
and onChange
events will be triggered simultaneously when the Slider
is interacted with using a keyboard.
Selection of a single value from a Slider
track. A tooltip displays the value of the Slider
"thumb" when the thumb is focused or hovered.
Slider
's labels indicate the minimum and maximum values of the range, and can be located inline with the Slider
using the minLabel
and maxLabel
props or they can be located at the bottom of the Slider
using the marks
prop.
To make the Slider
accessible, ensure screen readers can accurately convey the range and its values. While screen readers announce the default minimum and maximum values, customizing labels with minLabel
and maxLabel
is best paired with updating screen reader text using accessibleMinText
and accessibleMaxText
. These props let you define the exact text announced for the minimum and maximum values, ensuring alignment with custom labels. For instance, if minLabel
is "Low" and maxLabel
is "High," set accessibleMinText
to "Low" and accessibleMaxText
to "High" for a more intuitive experience for assistive technology users.
You can use the constrainLabelPosition
prop to ensure that the bottom labels remain within the Slider
's boundaries. When set to true
, it prevents labels from extending beyond the Slider
, maintaining a tidy and consistent appearance. This is particularly useful for preserving layout integrity and ensuring label readability across various screen sizes.
Note: Enabling constrainLabelPosition
may lead to inconsistent spacing between marks. Use this option carefully to balance visual clarity and distribution.
You can display marks under the Slider
track to label specific values. The showTicks
property allows you to display small ticks above the marks, enhancing visual guidance for users by providing clear reference points along the track. This feature improves usability by making it easier for users to select precise values.
You can combine marks
with minLabel
and maxLabel
to provide even more context regarding the Slider
.
To add non-numeric marks
to certain values, please refer to the example with non-numeric values below.
The restrictToMarks
property, when set to true
, confines the Slider
's movement to predefined values specified in the marks
array. This means that the Slider
can only stop at these specific values, rather than any arbitrary value along the Slider
's range. The step
property is ignored in this case.
You can set the Slider
as disabled.
By default, the Slider
step increment is set to 1. This can be customized by using the step
prop. Custom step values can be set to any number, including decimal values up to two decimal places.
We recommend (max - min) to be evenly divisible by the step to ensure that all values of the Slider
are reachable.
You can pass a callback function to the format()
prop to format the display values in the tooltip. This format()
callback will also be applied to screen reader announcements to ensure accessibility. You can use the format()
callback to to display units or currency.
When formatting the values, it is recommended to add the same formatting to the marks if passed.
You can wrap the Slider
in a form field and display a label. For more information, refer to the form field documentation.
You can display inputs with the Slider
. Inputs are used to enter a numeric value from the predefined range, enabling the thumb to jump to the specified value.
"Out of range" changes to the value (i.e. setting the input to a value above or below the slider's min
and max
values) will be rounded to the nearest valid value for the Slider
.
- Display one input to the left of the track.
- When using inputs, ensure the
Slider
state is controlled (by explicitly setting thevalue
prop). - Use the
Slider
'sonChange
callback to update the input values when theSlider
is interacted with. - Validate your input value changes and update the
validationStatus
prop on any inputs accordingly. - Only use the inline labels of the
Slider
alongside an input via thelabelPosition
. This ensures the size-base alignment of the overall component layout is maintained.
To hide the tooltip when hovering over the Slider thumb, you can use the showTooltip
prop. This is beneficial in cases where your Slider already conveys enough information, eliminating the need for a tooltip.
You can implement a Slider
that allows users to select non-numeric values with the help of the format()
callback and with a focus on accessibility through the use of aria-valuetext
.
The Slider
maps numeric values to meaningful non-numeric options, enabling intuitive selection beyond simple numbers. The aria-valuetext
attribute is, by default, dynamically updated based on the format()
callback to announce the selected option, providing clear feedback for users with assistive technologies. You also have the choice to update the aria-valuetext
attribute via props.
- Create a controlled slider and use your
format()
callback to create formattedmarks
. - Update
aria-valuetext
with the formatted current slider value. - Make the
marks
responsive on smaller screens by implementing logic to render them based on breakpoints.
This approach ensures a user-friendly and accessible interface for selecting non-numeric values.
The Slider
component provides two key event handlers: onChange
and onChangeEnd
, which are essential for handling user interactions with the Slider
, whether through mouse or keyboard input.
onChange
Event: This event is triggered continuously as the user drags theSlider
thumb or adjusts it using keyboard controls. It provides real-time feedback by updating the value as the thumb moves or as keyboard inputs modify the value. This is particularly useful for scenarios where you want to display dynamic changes or provide immediate feedback to the user, such as updating a preview or displaying the current value.onChangeEnd
Event: This event is fired once the user releases theSlider
thumb or adjusts it using keyboard controls, indicating the end of the interaction. It is ideal for scenarios where you want to perform actions that should only occur after the user has finished adjusting theSlider
, such as submitting a value, triggering a calculation, or updating a state that should not be changed continuously.
Note: Both onChange
and onChange
events will be triggered simultaneously when the Slider
is interacted with using a keyboard.