# How do I manipulate range sliders, color pickers, and other specialized HTML inputs?

> How to control range sliders, color pickers, and other HTML inputs with Loadster Browser Bots using JavaScript Evaluate Blocks.

Source: https://loadster.com/faqs/manipulating-range-sliders-and-other-unusual-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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
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](https://loadster.com/manual/browser-scripts/#evaluate).

## Range sliders

Here's an example of an eval block that sets the value of a range slider.

```javascript
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.

```javascript
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.

```javascript
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.