Used fallBack styles to compute font size slider initial value.

[jorgefilipecosta]

Description

This PR changes the RangeSlider to have a new prop called initialPosition. If this prop is set, when no value is passed to the slider, the slider appears with the given start value.
withFallbackStyles is used to get the font size of the paragraph if it is not known. Fallback value is used as the initial position in the slider.
As we use compute styles, even if the paragraph is nested and a CSS rule changes the size of the nested paragraph, the default value in the slider should be right.

Before the slider was in the middle so when the user changed the slider it would make the size very big and different from what it was. Now the slider starts at the correct size so when the user slides the behavior looks more correct.

How Has This Been Tested?

Add paragraph verify the slider starting position corresponds to the actual font size of the paragraph.

Screenshots (jpeg or gifs if applicable):

After:

Before:

[jasmussen]

Love this. Works as advertised. 👍 👍

For context, this was my only remaining issue with using the slider for the font size — that the initial state was just "centered". It didn't properly communicate "unset", and it was just jarring when you started dragging and you'd immediately jump to a giant size. Nice work.

[gziolo]

It all works pretty well I found one small issue. When using Reset button, it doesn't always return to the initial value. We probably need to ensure it is never updated in the state.

Code wise everything looks good aside from this little thing. I hope it isn't hard to fix.

[jorgefilipecosta]

Hi @jasmussen and @gziolo thank you for the reviews.

When using Reset button, it doesn't always return to the initial value. We probably need to ensure it is never updated in the state.

Nice catch, I was able to reproduce the behavior when the paragraph was already saved with a specific size doing reset was not moving the slider, I applied a fix and I think the problem is now solved.

[gziolo]

Everything works perfectly fine with the recent code update. Thanks for solving this subtle but very annoying UX issue 👏

[aduth]

Should this have been called defaultValue for consistency with React?

https://reactjs.org/docs/uncontrolled-components.html#default-values

[jorgefilipecosta]

Hi @aduth,

Should this have been called defaultValue for consistency with React?

The RangeControl has "two inputs" a slider and an input text with the value. The initialPosition prop is just used to position the slider in a given place when no value was set. It is not exactly a default value as for example the input text still shows no value. Using defaultValue may create the expectation that we are in the presence of a normal defaultValue.

[aduth]

Okay, that makes sense. It wasn't entirely clear from the documentation that this is more of a visual effect, not an actual value.