feat(ui5-range-slider): Add Range Slider component

[ndeshev]

Introduce ui5-range-slider component that represents a numerical interval and two handles to select a sub-range within it.
The purpose of the component is to enable visual selection of sub-ranges within a given interval.

<ui5-range-slider start-value="10" end-value="20"></ui5-range-slider>

Overview

ui5-range-slider extends the SliderBase base class. It contains most of the component's API as well as it's CSS and the core part of the template file:

Properties:

• min - The minimum value of the slider range
• max - The maximum value of the slider range
• value - The current value of the slider
• step - Determines the increments in which the slider will move
• showTickmarks - Displays a visual divider between the step values
• showToolTip - Determines if a tooltip should be displayed above the handle
• labelInterval - Labels some or all of the tickmarks with their values.
• disabled- Defines whether the Slider is in disabled state.

Events:

• change - Fired when the value changes and the user has finished interacting with the slider.
• input - Fired when the value changes due to user interaction that is not yet finished - during mouse/touch dragging.

ui5-range-slider extends the API above with its specific properties:

• startValue - Defines start point of a selection - position of a first handle on the slider.
• endValue - Defines end point of a selection - position of a second handle on the slider.

Main features:
The Range Slider allows users to:

• Change the startValue or endValue by clicking on the RangeSlider progress tracker or moving the handles.
• Drag the whole selected range to increase or decrease the start and end values.
• Handles (and values) can move across each other. If the start-handle passes over the end-handle the 'startValue' and 'endValue' properties are swapped, in order the start-handle to always represent the 'startValue' and so for the endValue/handle.
• define custom "min" and "max" values of the Slider, they can be positive or negative numbers, round or decimal ones.
• define a custom step - the step is the number with which the Slider value is increased/decreased. It also can be a round number or a decimal one.
• the startValue and endValue properties are always kept within the boundaries of the min and max they are synchronized between each other, along with their visual UI representation.

[CLAassistant]

All committers have signed the CLA.

[ilhan007]

Niki, Thanks for the PR.

I tried it briefly and I looked at the code, it works fine to me and conceptually I don't find major things.

The way you apply styles to the DOM element is something that you should refactor. We do it more declaratively so to say, compared to the imperative approach you have. You will find more details in the inlined comment.

Regarding the API, I would say we should discuss the "value" and "endValue' thing within the team, otherwise it seems fine.

[ndeshev]

Hey Ilhan,

Thank you for your comments and kind feedback.

Just want to say I am working on the range selection concept (with the endValue prop) at the moment and it is not yet functional. I will write an update when I have progress later, in order to have something like an implementation example (..proof of concept) when discussing the property.

Overall the PR is still in an early, draft stage, the CSS is there for now just to visualise the POC samples, the code will be also changed and refactored frequently.

[ndeshev]

I separated the Slider and Range Slider functionality and introduced a new common base class - SliderBase.
I created a new draft pull request for the Slider and will continue to update this one as a stand alone RangeSlider component.

[ndeshev]

Feature Request: #1242

[ndeshev]

Hello, I rebased this PR based on the Slider's branch.

Current progress overview:

• Range Slider includes the features of the Slider component, plus specific Range features like swapping the values when one handle come across the other, and moving the whole range selection when dragging it.
• The code review comments changes are done (including the ones from the Slider's pull request that are relevant)
• Theme styles are added according to the specifications, including HCW and HCB variants.
• RTL support is implemented
• Playground samples
• Test page and unit tests
• Accessibility and keyboard handling will be added on a later stage.
• The branch is synced with the updated UI5 Web Components master branch.

[ndeshev]

Hi colleagues, everything we discussed about the Slider's implementation is now adapted and applied here to the Range Slider and it is ready to be reviewed again.

This PR is based on the Slider's one, the only additional files are RangeSlider.js, the playground sample, the test page and the unit tests for it.