Tailwind CSS React 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

        
            
      import React from 'react';

      export default function App() {
        return (
            <div>
                <label
                  htmlFor="customRange1"
                  className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                >
                Example range
                </label>
                <input
                  type="range"
                  className="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
                  id="customRange1"
                />
            </div>  
        );
      }

Hey there 👋 we're excited about TW Elements for React 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

        
            
      import React from 'react';

      export default function App() {
        return (
            <div>
                <label
                  htmlFor="disabledRange"
                  className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                >
                Disabled range
                </label>
                <input
                  type="range"
                  className="transparent h-1.5 w-full appearance-none rounded-lg border-transparent bg-neutral-200"
                  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

        
            
      import React from 'react';

      export default function App() {
        return (
            <div>
                <label
                  htmlFor="customRange2"
                  className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                >
                Example range
                </label>
                <input
                  type="range"
                  className="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
                  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

        
            
      import React from 'react';

      export default function App() {
        return (
            <div>
                <label
                  htmlFor="customRange3"
                  className="mb-2 inline-block text-neutral-700 dark:text-neutral-200"
                >
                Example range
                </label>
                <input
                  type="range"
                  className="transparent h-1.5 w-full cursor-pointer appearance-none rounded-lg border-transparent bg-neutral-200"
                  min="0"
                  max="5"
                  step="0.5"
                  id="customRange3"
                />
            </div> 
        );
      }

If you are looking for more advanced options, try Bootstrap Range from MDBootstrap.

Range

Basic example

Disabled

Min and max

Steps

Related resources