Pricing

Tailwind CSS Range Slider - Flowbite

Get started with the range component to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options

The range component can be used as an input field to get a number from the user based on your custom selection (ie. from 1 to 100) by using a sliding animation.

The examples on this page are all coded with Tailwind CSS and requires you to install Flowbite as a plugin inside your project to obtain all the necessary stylings.

Range slider example

Get started with this default example with values from 1 to 100 and the default value of 50.

Edit on GitHub
<label for="default-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default range</label>
<input id="default-range" type="range" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">

Disabled state

Apply the disabled class to disallow the users from further selecting values.

Edit on GitHub
<label for="disabled-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default range</label>
<input id="disabled-range" type="range" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700" disabled>

Min and max

Use the min and max attributes on the range component to set the limits of the range values.

Edit on GitHub
<label for="minmax-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Min-max range</label>
<input id="minmax-range" type="range" min="0" max="10" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">

Steps

Use the step attribute on the range component to set the increment with which the values will change.

Edit on GitHub
<label for="steps-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Range steps</label>
<input id="steps-range" type="range" min="0" max="5" value="2.5" step="0.5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">

Sizes

Apply the small, default, and large sizes for the range component by applying the range-sm and range-lg utility classes from Flowbite and Tailwind CSS.

Edit on GitHub
<label for="small-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Small range</label>
<input id="small-range" type="range" value="50" class="mb-6 w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer range-sm dark:bg-gray-700">

<label for="medium-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Default range</label>
<input id="medium-range" type="range" value="50" class="mb-6 w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700">

<label for="large-range" class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Large range</label>
<input id="large-range" type="range" value="50" class="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer range-lg dark:bg-gray-700">

Copied code to clipboard!