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 hidden input.

If you need to change the values of these inputs, you can do it with an eval block.

Range sliders

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

Dispatching an event is not strictly necessary, but some JavaScript frameworks like React or Vue might have reactive listeners attached to the slider, and firing the change event will let them know its value has changed.

Color pickers

Picking a color from an HTML color input is similar.

document.querySelector('#color').value = '#ff3900';
document.querySelector('#color').dispatchEvent(new CustomEvent('change'));

Again, dispatching an event isn’t required to change the input value, but might be necessary if you’re using a reactive JavaScript framework that wants to be notified of the color change.

Hidden inputs

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.