DataList element for auto-completion in Input Text and for ticks in Input Range

One of the underrated HTML element is <datalist>

When user types in <input type="text"/>, the easiest way to show auto-complete suggestions is by using <datalist> HTML element.

<input type="text" list="cakes">

<datalist id="cakes">
  <option> Red Velvet Cake</option>
  <option> Genoise Cake </option>
  <option> Chiffon Cake </option>
  <option> Yellow Butter Cake </option>
  <option> Devil’s Food Cake </option>
</datalist>

To the input field, add the list attribute with value as id of datalist element.

Check out the codepen demo for above example: https://codepen.io/tejesh0/pen/VwvXpwB

Interestingly, datalist element can be used with range input type to add ticks on slider.

<input type="range" min="0" max="1" step="0.01" list="slider-ticks">

<datalist id="slider-ticks">
  <option>0</option>
  <option>0.25</option>
  <option>0.5</option>
  <option>0.75</option>
  <option>1</option>
</datalist>

Check out the codepen demo for above example: https://codepen.io/tejesh0/pen/MWaVpeJ

In chrome browser, while moving the slider, you can observe the locking like effect when the slider is close to the ticks? Nice, isn't it?