A lot of times we think of HTML as a static, inflexible, language. But there are many things you can do with HTML that are not obvious unless you look for them.
This post will look at two specific things you can do with HTML range inputs: adding tickmarks and a live value display.
## Range inputs with ticks (datalist)
When using a range input on its own, you specify a minimum and maximum value, and the user can select any value in between.
```html
```
As you can see below, on its own, the range input is not very informative. It doesn't provide cues as to what the values are, and it doesn't provide any visual indication of the value selected.
Range input without ticks
Supplying a [datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) to a range input does two things:
* It renders tickmarks at each value step
* It clamp the input value to one of the datalist options
With the datalist, the user knows what value they've selected, similar to what you can do with the `step` attribute, but with an added visual cue.
```html
```
Range input with ticks using a datalist
## Range inputs with live value display
Most of the examples I see of range inputs displaying the value on the page are done with external Javascript. But you can also do this with just a little inline Javascript in the `oninput` attribute.
```html
```
the `oninput` attribute fires when the value of the input changes. In this example, we set the value of the next sibling element (the `
