Skip to main content
Logo USWDS + Tailwind

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>