How do I manipulate range sliders, color pickers, and other specialized HTML inputs?
Most of the time, Browser Bots can click and enter values into form fields from your scripts quite easily, by clicking and typing and selecting values just like a normal user would. But there are actually quite a few types of HTML input fields, and not all of them have corresponding steps in a browser script.
For example, a range slider (
<input type="range"/>) or color picker (
<input type="color"/>) can’t be controlled with
simple clicks or typing text like most other fields can. And of course, it’s impossible to click a
If you need to change the values of these inputs, you can do it with an eval block.
Here’s an example of an eval block that sets the value of a range slider.
const slider = document.getElementById('age-slider'); slider.value = 33; // set the element value slider.dispatchEvent(new CustomEvent('change')); // fire a change event
Picking a color from an HTML color input is similar.
document.querySelector('#color').value = '#ff3900'; document.querySelector('#color').dispatchEvent(new CustomEvent('change'));
Similarly, changing the value of a hidden input just requires an eval block to grab a handle and update it.
document.querySelector('form input[name=project_id]').value = '139';
Most of the time, the Browser Bot doesn’t even have to think about hidden inputs, any more than a normal user on your site would. But it’s nice to be able to work with them if you need to.