Tailwind CSS Range

Use responsive range component with helper examples for range slider input, minimum and maximum ranges, range with steps & more. Open source license.

Basic example

The slider reflects a range of values along a bar from which the user can select a single value. Ideal for adjusting volume and brightness, applying image filters, etc.

Example range

HTML

        
            
      <div>
        <label
          for="customRange1"
          class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
          >Example range</label
        >
        <input
          type="range"
          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
          id="customRange1" />
      </div>

Hey there 👋 we're excited about TW elements and want to see it grow! If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Disabled

Use the disabled attribute on the input to make it look neutraled out and remove indicator events.

Disabled range

HTML

        
            
      <div>
        <label
          for="disabledRange"
          class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
          >Disabled range</label
        >
        <input
          type="range"
          class="transparent h-[4px] w-full appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
          id="disabledRange"
          disabled />
      </div>

Min and max

Range inputs have implicit values for min and max—0 and 100, respectively, and new values can be specified using the minimum and maximum attributes.

Example range

HTML

        
            
      <div>
        <label
          for="customRange2"
          class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
          >Example range</label
        >
        <input
          type="range"
          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
          min="0"
          max="5"
          id="customRange2" />
      </div>

Steps

Range component can have steps other than 1. This can be helpful for some applications where you need to adjust values with more or less accuracy.

Example range

HTML

        
            
      <div>
        <label
          for="customRange3"
          class="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
          >Example range</label
        >
        <input
          type="range"
          class="transparent h-[4px] w-full cursor-pointer appearance-none border-transparent bg-neutral-200 dark:bg-neutral-600"
          min="0"
          max="5"
          step="0.5"
          id="customRange3" />
      </div>

Range

Basic example

Disabled

Min and max

Steps

Access restricted

To view this section you must have an active PRO account

Range

Tailwind CSS Range

Basic example

Disabled

Min and max

Steps

Related resources

Tutorials:

Extended Docs:

Generators and builders:

Design System (Figma):