[Slider] Fix slider focus in scrollable context

[Rheddes]

Description

Previously if a Slider was used in a context where one has to scroll to view the entire range of the Slider, and the Slider was used in conjunction with a backed value (i.e. Value and onValueChange props are provided) then unexpected scrolling would occur with the following steps.

1. Have the slider at a position near the start value.
2. Scroll towards the end of the slider (make sure the Slider thumb is no longer visible in the scroll container).
3. Click somewhere else to ensure the Slider thumb is currently not the focused element
4. Click on the slider track to change the value

Then the .focus() in the onChange handler would scroll back to the last location of the Slider thumb, and then the value would be updated. Thus the Slider thumb would be at the location you scrolled to, while the user would be at the location where the slider thumb was before.
See video for short demo.

slider-demo.mp4

This fix prevents scrolling when focusing the Slider Thumb so the location in the scroll context remains stable.

Current behavior can be observed in the following Codesandbox https://codesandbox.io/p/devbox/damp-microservice-n4hz7x
I also included a story in Storybook where the Slider is placed in a scroll container where the fixed behavior can be observed.

Motivation

One might wonder why you would have a Slider so wide that you need to scroll. I am currently building a diagram where the x axis represents time and in that context it is quite likely that the whole diagram represents 24 hours, but the user only sees 2~3 hours on their screen at a time in order to observe the necessary details.