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 want to make Tailwind Elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!

Share via Reddit Share via StumbleUpon

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

Related resources

Tutorials:

Extended Docs:

Design System (Figma):