RangeSlider styling issues

[psyvision]

The RangeSlider component has a couple of styling issues.

1. When the slider is near other components, the "current number popup" above the slider overlaps items above it on the screen
2. When the slider is placed on certain layouts, it causes horizontal scroll to occur. It can be seen on the storybook for the slider control specifically but not when you demonstrate it within a form on the storybook, it is worse when placed on modals.

Steps to reproduce

1. Please a few fields on a form
2. Ensure a <RangeSlider /> is below another item
3. See label overlapping

Minimal reproduction

Overlapping label:

Storybook - https://storybook.design-system.navy.digital.mod.uk/?path=/docs/forms-usage-formik--docs

Horizontal scrolling:

Storybook - https://storybook.design-system.navy.digital.mod.uk/?path=/story/components-range-slider--default&args=domain[1]:12;hasMarkers:!true;hasLabels:!true;isDisabled:!false

Screenshot

[m7kvqbe1]

Maybe we could add a showLabelsOnHover prop or similar as an enhancement.

Horizontal scrolling bug should be a relatively straightforward fix.

We'll action both of these soon.

[github-actions]

This issue has been marked as stale because it has been open for 60 days with no activity