[ui5-range-slider]: tooltip value should have a single state that controls the DOM

[pskelin]

Bug Description

Right now, the RangeSlider component has a property for startValue and endValue that is passed in the template to the SliderTooltip component like this:

<SliderTooltip
    value={this.startValue.toString()}
>
</SliderTooltip>

If there is an invalid value typed in the input (larger than the maximum), the invalid value stays in the DOM, but the value that is passed from the RangeSlider to the SliderTooltip remains the inital value, hence the DOM does not represent the state that was used to render it.

There is even a test that asserts this beahviour:

webcomponents/packages/main/cypress/specs/RangeSlider.cy.tsx

Line 590 in a7e7bf3

it("Invalid tooltip value should not be changed on 'Enter'", () => {

This behaviour means there should be two properties - one for the value coming from the API and one for the value that is entered and the one passed in the template should be decided base on these two values and the validity of the input.

This issue is a blocker for #10935