feat(core/slider): add slider component

[danielleroux]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)
• Build (yarn build) was run locally and any changes were pushed
• Unit tests (yarn test) were run locally and passed
• Visual Regression Tests (yarn visual-regression) were run locally and passed
• Linting (npm lint) was run locally and passed

Pull request type

Please check the type of change your PR introduces:

• Bug fix
• Feature
• Refactoring (no functional changes, no API changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the new behavior?

• Add slider component

Does this introduce a breaking change?

• Yes
• No

[jg0815]

A11Y Review

The slider component has the following accessibility issues:

• The contrast ratio of the color of the div element of class "track" against the adjacent background is far to low (#283236 against #0F1619). The WCAG Success Criterion 1.4.11 "Non-text Contrast" requires at least 3:1, but only 1.4:1 is available.
• The tooltip, which is used to present the current value of a slider, is not rendered when the slider component is operated via keyboard. (See WCAG Success Criterion 2.1.1 "Keyboard" and WCAG Success Criterion 4.1.2 "Name, Role, Value".)
• The tooltip, which is used to present the current value of a slider, does not stand out sufficiently from the background in terms of color (see any tooltip in the images 1 - 4 below). (See WCAG Success Criterion 1.4.11 "Non-text Contrast".)
• The tooltip, which is used to present the current value of a slider, does not move sufficiently with the slider handle when it is moved (see sample operating sequence ⓿ - ❹ depicted in image 1 below). This can lead to situations where the tooltip disappears from the visible area when using magnification software. (See WCAG Success Criterion 1.4.13 "Content on Hover or Focus".)
• In some situations, the tooltip, which is used to present the current value of a slider, overlays relevant areas of the trigger component, but is not dismissable (see sample screenshot snippets in the images 2 - 4). (See WCAG Success Criterion 1.4.13 "Content on Hover or Focus".)
• The focus indication of the slider is quite too weak, especially for scale factors smaller than 1. (See WCAG Success Criterion 2.4.7 "Focus Visible".)
• The following requirement is not met: The element serving as the focusable slider control has role slider. (See WCAG Success Criterion 4.1.2 "Name, Role, Value".)
• The following requirement is not met: If the slider has a visible label, it is referenced by aria-labelledby on the slider element. Otherwise, the slider element has a label provided by aria-label. (See WCAG Success Criterion 4.1.2 "Name, Role, Value".)

Image 1: Operating sequence with insufficient tooltip placement

Image 2: Non-dismissable tooltip overlay (I)

Image 3: Non-dismissable tooltip overlay (II)

Image 4: Non-dismissable tooltip overlay (III)

[nuke-ellington]

lgtm

[nuke-ellington]

lgtm

[nuke-ellington]

lgtm

[nuke-ellington]

LGTM!!