feat(RangeSliderE): Base implementation with feature parity

[m7kvqbe1]

Related issue

Closes #2436

Overview

Create new experimental RangeSliderE component based on design spec.

Link to preview

https://61a8f4b587ed053ee108b405--rangeslidere.netlify.app

Reason

Implement new RangeSliderE component and reach feature parity with legacy.

Work carried out

• [x] Create base component implementation
• [x] Use new story format
• [x] Make some performance enhancements
• [x] Fix bug when clicking to change slider value
• [x] Add hasMarkers prop to toggle markers
• [x] Remove deprecated hasPercentage feature
• [x] Style in line with design spec

Screenshot

Developer notes

The design spec changes the way threshold functionality works when combined with multiple handles.

Needs discussion with design authority to elaborate on desired behaviour.

This will be implemented as part of a seperate PR: https://github.com/defencedigital/mod-uk-design-system/issues/2849

[k9dh3zij]

Thanks @m7kvqbe1, looking great! Minor style tweaks:

1. When at the lowest / highest value, the handle should be mid-aligned to the visual start / end of the scale. It's currently a few pixels off:

2. Clicking anywhere on the slider (causing the handle to move) or grabbing and moving the number input box should cause the slider handle to get the focus. Currently it only gets the focus if I grab the handle itself or tab to it.

https://user-images.githubusercontent.com/73531035/144046648-ca1a3f48-b091-4301-a1b9-b707cda755bb.mov

3. Clicking exactly on a tickmark doesn't cause the slider to move there (notice the second click in the video above).

4. Apologies this wasn't called out in the spec, but can you ensure a 12px padding between the icons and the edges of the slider track please?

[jpveooys]

@m7kvqbe1 FYI the Chromatic build failed for IE11:

[m7kvqbe1]

Removed CSS variables optimization because IE11 polyfills do not work with styled-components.

[k9dh3zij]

Thanks for the fixes @m7kvqbe1 - looking great! 👍

I assume this is part of #2849 but just so it doesn't get lost:

Tickmarks with thresholds currently disappear behind the filled track. Current: Spec:

All earlier points have been addressed, thank you! :)

[sonarcloud[bot]]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
4 Code Smells

97.5% Coverage
13.0% Duplication