Range Slider set precise values via text box Validated

Hello,

We would like to use the range slider component as a UX solution for delimiting thresholds between 3 regions. For example, we might want to set 2 thresholds that say:

- items with a value less than 30% are labled with red
- items with a value between 30% and 70% are labled with yellow
- items with a value larger than 70% are labled with green

We raised a separate feature request for adding support for a more in-depth customization of the range slider bar, so that we could colour each section independently.

For this feature request, we would like to have a way to easily and precisely set the values indicated by the range slider.

For example, we would like to have the option of inputing the value indicated by a handle directly using a numeric box. This way, the end user wouldn't have to fiddle with the handle until they reach the precise value that they want to set. The component might look something like this:

We would like to re-use this component as a UX pattern in multiple places in our applications, so adding this feature to the range slider component would be of great help to us.

Thanks!