Many of us have seen and used them. In the WordPress Block Editor, they are available for things like the font size of several blocks. This is how it looks for the core/paragraph block:

When you use the range selector, it will show the current value under the “range thumb” and also updates it in the number input field left of it.

Options for the range input

The two most important attributes to the range input are probably the min and max attributes. So this is a basic example:

<input type="range" id="font-size" name="font-size" min="16" max="96" />
<label for="font-size">font size</label>

As always, don’t forget to have a <label> for your inputs. If you don’t set min, its default value will be 0 and for max it will be 100.

Another attribute you might want to use it step. This can be a decimal or floating-point value, like in this example:

<input type="range" id="font-size" name="font-size" min="16" max="96" step="4" />
<label for="font-size">font size</label>
<input type="range" id=">line-height" name="line-height" min="0" max="10" step="0.1" />
<label for="line-height">line height</label>

For some reason, WordPress is not using a range input, but only a number field. But it is also using a step width of “0.1” here.

On the documentation page, you will also find a rather crazy example for the step attribute, and it looks like this:

<input id="pi_input" type="range" min="0" max="3.14" step="any" />

If you use the value “any“, the input will really take “any floating-point” value in between min and max. Interestingly, if you use your keyboard to navigate to the range input, and then use the left/right cursor keys to move the thumb, you will get 100 discrete values. But if you use your mouse, you will get some random wild numbers in between.

Using the list attribute

In the last blog post on the HTML topic, we have already learned about the list attribute, and the range input also supports it. You can find some normal and creative examples in the documentation. In Chrome, using a list attribute lets the thumb “snap” to <option> values of the <datalist>, but you can still also have a value in between. In my opinion, you can best combine the list attribute with steps, as in this case, you only allow the selection of options in your <datalist>:

<label for="temp">Choose a comfortable temperature:</label><br />
<input type="range" id="temp" name="temp" list="markers" step="25" />

<datalist id="markers">
  <option value="0"></option>
  <option value="25"></option>
  <option value="50"></option>
  <option value="75"></option>
  <option value="100"></option>
</datalist>

This code shows an input without min/max values, but with an additional step="25" attribute. Also take a look at the example using labels.

Styling of the range input

The styling would look very different, depending on your browser or operating system. Even though WordPress is using a range input, what you see is not the input itself. It is made “transparent” and lays above some custom HTML using multiple spans to create a UI element, that looks the same in all browsers. If you want to use that exact element, you can use the RangeControl component in your JavaScript code.

But even if you can’t style the range input exactly the same, there are some options to styles it, like changing the color of the bar and thumb:

input[type='range'] {
  height: 30px;
}
input[type='range'],
input[type='range']::-webkit-slider-runnable-track,
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 10px;
  background: red;
}
input[type='range']::-webkit-slider-thumb {
  position: relative;
  height: 30px;
  width: 30px;
  margin-top: -10px;
  background: green;
  border-radius: 50%;
}

This is only one example for Chrome/Webkit. It’s important to set many things to appearance: none, as otherwise the other styling changes would have no effect. These styles would result in a range input like this:

You all know I’m not a designer, but I hope this illustrates the styling a bit. If you want to go really creative, take a look at the blog posts from CSS-Tricks, Smashing Magazine or W3Schools.

Conclusion

Range inputs can really make the UX of an online application better, since number inputs are not “as responsive” in some cases. And if you are not in the WordPress JavaScript ecosystem, using the native range input might be all you need.