wip(ui5-range-slider): refactor ui5-range-slider component

[ndeshev]

JIRA: BGSOFUIRILA-4268

[ui5-webcomponents-bot]

🚀 Deployed on https://pr-13316--ui5-webcomponents-preview.netlify.app

[nikoletavnv]

There is an issue when you click on the slider track and both start and end handle get selected and you try to move the handles using Arrow Left and Arrow Right.

1. Go to the sample "Range Slider with steps, input tooltips, tickmarks and labels" in the RangeSlider.html page
2. Move the start and end handle to some values - e.g. 8 and 22.
3. Select the track somewhere in between to focus the whole range progress
4. Try to move the range progress using Arrow Left and Arrow Right keys

Most of the times the range does not move.

5. Sometimes when you move the range with the mouse and try again to move it with Arrow Left and Right it starts to work, but I can't find a pattern to reproduce the working path consistently