[Question]: How to fill inputs with type "range"?

[il-bot]

Sorry if this is already explained somewhere (please share the link), couldn't find any information on it.
Basically, I have a simple input on page:

<input type="range" data-testid="rangeInput" min="0" max="1" step="0.01">

If in my code I simply try to call

await page.fill('data-testid=rangeInput', '0.5')

I see error: page.fill: Input of this type cannot be filled and below input of type "range" cannot be filled
Seems like the range input is not supported, so I assume there is some kind of a workaround here?
For example, to focus on the range input and use keyboard arrows (left/right) to set the value. Is there a better way though?
I tried using $eval but it manipulates DOM directly, so it's not picked up by framework (VueJs in my case), or I might have missed something.

[pavelfeldman]

For now you can give it a hint via dispatching respective events

  await page.$eval('data-testid=rangeInput', (e, value) => {
    e.value = value;
    e.dispatchEvent(new Event('input', { 'bubbles': true }));
    e.dispatchEvent(new Event('change', { 'bubbles': true }));
  }, 0.5);

[il-bot]

And that worked, thanks for the fast reply (on Saturday!) and for the great work you guys do in Playwright!

[DerGut]

I stumbled over this issue too and unfortunately it is a little more complicated to solve when you are dealing with a React app.

For other folks having this issue too:

React components typically store input values in their internal state and therefore keep track of them changing. When we set the element value with

e.value = value;

we are actually setting the value of the ReactDOM element. React notices the change and updates the value of the underlying native DOMElement behind the scenes.
When an "input" or "change" event arrives, the value of the ReactDOM element is first compared to the value of the underlying native DOMElement. Because React has already updated the value, no change is detected and the event propagation ist stopped. Event handlers listening on "onChange" will never get called.

To solve this issue, the value of the native element needs to get updated without having React notice the change.

A solution that works for me has been posted here: facebook/react#10135 (comment)