Range slider

A range slider allows users to choose an approximate number from a range.

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Twig

<form class="max-w-xs">
  <label for="usa-range">Range slider</label>
  <input
    id="usa-range"
    class="appearance-none bg-transparent border-none w-full h-10 p-2 pl-px mt-2 focus:outline focus:outline-4 focus:outline-blue-40v track:appearance-none track:cursor-pointer track:h-4 track:bg-gray-5 track:rounded-full track:w-full track:border track:border-solid track:border-gray-50 thumb:appearance-none thumb:bg-gray-5 thumb:h-5 thumb:w-5 thumb:-mt-[calc(0.125rem+1px)] thumb:rounded-full thumb:ring-2 thumb:ring-gray-50 thumb:focus:bg-white thumb:focus:ring-blue-40v"
    type="range"
    min=""
    max=""
    step=""
    value="20"
  />
</form>