![Eiji Kitamura](https://web.dev/images/authors/agektmr.jpg) Eiji Kitamura [X](https://twitter.com/agektmr) [GitHub](https://github.com/agektmr) [Mastodon](https://infosec.exchange/@agektmr) [Bluesky](https://bsky.app/profile/agektmr.com)

<br />

Chrome started to support `datalist` for `input[type=text]` in Chrome 20. `datalist` helps developers provide recommended values, while allowing users the liberty to write arbitrary values at the same time. Beginning with Chrome 23, you can use `datalist` for `input[type=range]` and `input[type=color]` as well!

## input\[type=range\]

`datalist` for `input[type=range]` introduces the ability for developers to show indicators beside the slider as shown below:
![Range datalist.](https://developer.chrome.com/static/blog/datalist-for-range-color-inputs-offer-some-default-choices/image/range-datalist-fd72c46cdb141.jpg)

```html
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
    <option>10</option>
    <option>15</option>
    <option>30</option>
    <option>50</option>
    <option>90</option>
</datalist>
```

Moving the slider thumb on the input snaps to each of the ticks so that users can easily adjust to those values.

## input\[type=color\]

`input[type=color]` is already [supported in Chrome](https://caniuse.com/#feat=input-color) and Opera. Users can pick arbitrary color without any help from JavaScript plugins.

By adding `datalist` to `input[type=color]`, users can now pick a color from developer selected color swatches as well as choosing arbitrary color from a color picker by themselves.
![Color datalist.](https://developer.chrome.com/static/blog/datalist-for-range-color-inputs-offer-some-default-choices/image/color-datalist-f6b24d62f1f43.jpg)

```html
<input type="color" value="#000000" list="colors" />
<datalist id="colors">
    <option>#ff0000</option>
    <option>#0000ff</option>
    <option>#00ff00</option>
    <option>#ffff00</option>
    <option>#00ffff</option>
</datalist>
```

Note that `datalist` for `input[type=color]` only accepts the hex color values (ex. `#ff0000`) and values such as `#f00` or `red` won't work.

To see these new features in action, visit [a demo page](https://demo.agektmr.com/datalist/).