Slider

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 the value prop).
• Use the Slider's onChange callback to update the input values when the Slider 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 the labelPosition. 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 formatted marks.
• 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 the Slider 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 the Slider 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 the Slider, 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 the value prop).
• Use the Slider's onChange callback to update the input values when the Slider 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 the labelPosition. 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 formatted marks.
• 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 the Slider 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 the Slider 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 the Slider, 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 the value prop).
• Use the Slider's onChange callback to update the input values when the Slider 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 the labelPosition. 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 formatted marks.
• 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 the Slider 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 the Slider 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 the Slider, 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.