Click on the Slider label once to change the value.

Environment

Description

By default, I need to double click the Slider labels to change the value, but how can I achieve that by clicking on them once?

Solution

This can achieved by handling the component in controlled mode and handling the click event of the SliderLabel to get the clicked-on label value. You can get the value from the label when clicking it using e.target.innerText, set it to a state variable, and pass it to the value property of the Slider:

This is an example demonstrating this implementation: