search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Dark mode
      • Theming
      • Changelog
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Next
    • Content & styles
      • Animations
      • Animations extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Pagination
      • Pills
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Collapse
      • Dropdown
      • Link
      • List group
      • Modal
      • Paragraphs
      • Placeholders
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Timeline
      • Toasts
      • Tooltip
      • Video carousel
    • Forms
      • Checkbox
      • File input
      • Form templates
      • Inputs
      • Login form
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
    • Data
      • Charts
      • Tables
    • Methods
      • Ripple
    • ResourcesNew
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New

    Range

    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.

    • JSX
            
                
          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.

    • JSX
            
                
          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.

    • JSX
            
                
          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.

    • JSX
            
                
          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> 
            );
          }
          
            
        

    Related resources

    Progress Stepper

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

    • Basic example
    • Disabled
    • Min and max
    • Steps
    • Related resources
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2023 Copyright: MDBootstrap.com