search results:

    • Standard
    • React
    Pricing Learn Community
    • + D
    • Light
    • Dark
    • System
    logo TW Elements
    • Getting started
      • Quick start
      • Tutorials
      • Design system
      • Local installation
      • Optimization
      • Dark mode
      • Theming
      • Changelog
      • Migrating to v2
      • Internationalization guide
      • Class customization
      • Icons Integration
    • CommercialNew
      • Pricing
      • License
      • Installation
      • Git & repository
      • Premium Support
    • Integrations
      • Angular
      • ASP.NET
      • Django
      • Express
      • Laravel
      • Next
      • Nuxt
      • Qwik
      • React
      • Remix
      • Solid
      • Svelte
      • SvelteKit
      • Vue
    • Content & styles
      • Animations
      • Animations Extended
      • Colors
      • Dividers
      • Figures
      • Headings
      • Hover effects
      • Icons
      • Images
      • Mask
      • Shadows
      • Typography
    • Navigation
      • Breadcrumbs
      • Footer
      • Headers
      • Mega menu
      • Navbar
      • Offcanvas
      • Pagination
      • Pills
      • Scrollspy
      • Sidenav
      • Tabs
    • Components
      • Accordion
      • Alerts
      • Avatar
      • Badges
      • Button group
      • Buttons
      • Cards
      • Carousel
      • Chips
      • Collapse
      • Dropdown
      • Gallery
      • Jumbotron
      • Lightbox
      • Link
      • List group
      • Modal
      • Notifications
      • Paragraphs
      • Placeholders
      • Popconfirm
      • Popover
      • Progress
      • Rating
      • Scroll back to top button
      • Social buttons
      • Spinners
      • Stepper
      • Testimonials
      • Timeline
      • Toast
      • Tooltip
      • Video
      • Video carousel
    • Forms
      • Autocomplete
      • Checkbox
      • Datepicker
      • Datetimepicker
      • File input
      • Form templates
      • Input Group
      • Inputs
      • Login form
      • Multi range slider
      • Radio
      • Range
      • Registration form
      • Search
      • Select
      • Switch
      • Textarea
      • Timepicker
      • Validation
    • Data
      • Charts
      • Charts advanced
      • Datatables
      • Tables
    • Methods
      • Clipboard
      • Infinite scroll
      • Lazy loading
      • Loading management
      • Ripple
      • Scrollbar
      • Smooth scroll
      • Sticky
      • Touch
    • Design Blocks
      • Admin Charts
      • Admin Complex
      • Admin Forms
      • Admin Maps
      • Admin Navigation
      • Admin tables
      • Banners
      • Contact
      • Content
      • CTA
      • FAQ
      • Features
      • Headers
      • Hero / Intro sections
      • Logo clouds
      • Mega menu
      • News
      • Newsletter
      • Pricing
      • Projects
      • Stats
      • Stats admin
      • Team
      • Testimonials
    • Tools
      • Button generator
      • Card generator
      • Flexbox generator
      • Footer generator
      • Form builder
      • Grid generator
      • Icon generator
      • Instagram Filters generator
      • Logo generator
      • Table generator
      • Typography generator
    • Coming Soon
      • Angular
      • Builder
      • Templates
      • Vue
    • Resources
      • Playground
      • YouTube Channel
      • Private FB Group
      • Newsletter
      • UI Design course New
      • UI / UX tips
    • Overview
    • API

    Multi Range Slider

    Tailwind CSS Multi Range Slider

    TWE slider is an interactive component that lets the user swiftly slide through possible values spread over a desired range.

    Required ES init: MultiRangeSlider *
    * UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using TW Elements ES format then you should pass the required components to the initTWE method.

    Basic example

    A Multi Range Slider is gonna autoinit if you add data-twe-multi-range-slider-init attribute to your element. Slider starts with max 100 and min 0 values.

    • HTML
    • javascript
            
                
          <div data-twe-multi-range-slider-init></div>
          
            
        
            
                
          // Initialization for ES Users
          import { MultiRangeSlider, initTWE } from "tw-elements";
    
          initTWE({ MultiRangeSlider });
          
            
        

    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!

    Basic example with values

    You can show values in another element in the DOM.

    Value:
    First:
    Second:
    • HTML
    • javascript
    • umd
            
                
          <div id="multi-range-basic" data-twe-multi-range-slider-init></div>
          <div id="multi-range-basic-value" class="mt-3">
            Value:
            <span class="flex flex-col">
              <div>First:</div>
              <div>Second:</div>
            </span>
          </div>
          
            
        
            
                
          import { MultiRangeSlider, initTWE } from "tw-elements";
    
          initTWE({ MultiRangeSlider });   
    
          const basicExample = document.querySelector("#multi-range-basic");
          const oneRangeValueBasic = document.querySelector("#multi-range-basic-value");
        
          basicExample.addEventListener("valueChanged.twe.multiRangeSlider", (e) => {
            const [first, second] = e.values.rounded;
            oneRangeValueBasic.innerHTML = `
              Value:
              <div class="flex flex-col">
                <div>First: ${first}</div>
                <div>Second: ${second}</div>
              </div>
              `;
          });    
          
            
        
            
                 
          const basicExample = document.querySelector("#multi-range-basic");
          const oneRangeValueBasic = document.querySelector("#multi-range-basic-value");
        
          basicExample.addEventListener("valueChanged.twe.multiRangeSlider", (e) => {
            const [first, second] = e.values.rounded;
            oneRangeValueBasic.innerHTML = `
              Value:
              <div class="flex flex-col">
                <div>First: ${first}</div>
                <div>Second: ${second}</div>
              </div>
              `;
          });
          
            
        

    One range

    You can set a one range/hand to your slider using the data-twe-number-of-ranges attribute.

    • HTML
    • javascript
            
                
          <div data-twe-multi-range-slider-init data-twe-number-of-ranges="1"></div>
          
            
        
            
                
          // Initialization for ES Users
          import { MultiRangeSlider, initTWE } from "tw-elements";
    
          initTWE({ MultiRangeSlider });
          
            
        

    Start values

    You can customize the starting values for the ranges using the data-twe-start-values attribute.

    Value:
    • HTML
    • javascript
            
                
          <div
            id="multi-range-start-values"
            data-twe-multi-range-slider-init
            data-twe-start-values="[40, 80]"></div>
          <div id="multi-range-start-values-show" class="mt-3">Value:</div>   
          
            
        
            
                
          import { MultiRangeSlider, initTWE } from "tw-elements";
    
          initTWE({ MultiRangeSlider });      
    
          const startValue = document.querySelector("#multi-range-start-values");
          const startValueValues = document.querySelector(
            "#multi-range-start-values-show"
          );
        
          startValue.addEventListener("valueChanged.twe.multiRangeSlider", (e) => {
            startValueValues.innerHTML = `
              Value:
              <span class="flex flex-col">
                <div>First: ${e.values.rounded[0]}</div>
                <div>Second  ${e.values.rounded[1]}</div>
              </span>
              `;
          });
          
            
        
            
                 
          const startValue = document.querySelector("#multi-range-start-values");
          const startValueValues = document.querySelector(
            "#multi-range-start-values-show"
          );
        
          startValue.addEventListener("valueChanged.twe.multiRangeSlider", (e) => {
            startValueValues.innerHTML = `
              Value:
              <span class="flex flex-col">
                <div>First: ${e.values.rounded[0]}</div>
                <div>Second  ${e.values.rounded[1]}</div>
              </span>
              `;
          });
          
            
        

    Tooltips

    You can add tooltips to the ranges using data-twe-tooltip attribute.

    • HTML
    • javascript
            
                
          <div data-twe-multi-range-slider-init data-twe-tooltip="true"></div>
          
            
        
            
                
          // Initialization for ES Users
          import { MultiRangeSlider, initTWE } from "tw-elements";
    
          initTWE({ MultiRangeSlider });
          
            
        

    Step example

    You can define a step for the ranges using the data-twe-step attribute.

    • HTML
    • javascript
            
                
          <div data-twe-multi-range-slider-init data-twe-step="5"></div>
          
            
        
            
                
          // Initialization for ES Users
          import { MultiRangeSlider, initTWE } from "tw-elements";
    
          initTWE({ MultiRangeSlider });
          
            
        

    Related resources

    Tutorials:

    dark mode spacing utility first rounded corners sizing inputs forms

    Extended Docs:

    offcanvas offcanvas sidenav stepper center grid items dark theme display flex position spacing

    Generators and builders:

    Form drag & drop Typography SVG icon Instagram Filters button card table flexbox logo grid footer

    Design System (Figma):

    introduction art of prioritization de emphasize with no mercy let it breathe user experience do not start with the roof secondary questions project personality design system principles tips and tricks
    • Basic example
    • Basic example with values
    • One range
    • Start values
    • Tooltips
    • Step example
    • Related resources

    Multi Range Slider - API


    Import

    Importing components depends on how your application works. If you intend to use the TW elements ES format, you must first import the component and then initialize it with the initTWE method. If you are going to use the UMD format, just import the tw-elements package.

    • javascript
    • umd
            
                
            import { MultiRangeSlider, initTWE } from "tw-elements";
            initTWE({ MultiRangeSlider });
            
            
        
            
                
            import "tw-elements";
            
            
        

    Usage

    Via data attributes

    Using the component doesn't require any additional JavaScript code - simply add data-twe-multi-range-slider-init attribute to the element and use other data attributes to set all options. For ES format, you must first import and call the initTWE method.

    • HTML
            
                
            <div data-twe-multi-range-slider-init></div>
            
            
        

    Via JavaScript

    • javascript
    • umd
            
                
            const basicExample = document.querySelector('.multi-ranges-basic');
            const basicExampleInit = new MultiRangeSlider(basicExample);
            
            
        
            
                
            const basicExample = document.querySelector('.multi-ranges-basic');
            const basicExampleInit = new twe.MultiRangeSlider(basicExample);
            
            
        

    Options

    Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-twe-, as in data-twe-max="".

    Name Type Default Description
    max number 100 Set maximum range value of slider.
    min number 0 Set minimum range value of slider.
    numberOfRanges number 2 Set number of ranges of slider.
    startValues array | string [0, 100] Set start values of slider. The number of values should be equal to numberOfRanges.
    step string | null | number null Set step to range
    tooltip boolean false Set tooltips to ranges.

    Classes

    Custom classes can be passed via data attributes or JavaScript. For data attributes, append the class name to data-twe-class, as in data-twe-class-connect="".

    Name Default Description
    connect z-10 h-full w-full bg-[#eee] will-change-transform dark:bg-[#4f4f4f] Set styles to the connect element of slider.
    connectContainer relative border-[1px] border-[#eee] z-0 h-full w-full overflow-hidden dark:border-[#4f4f4f] Set styles to the connect container element of slider.
    container apperance-none relative m-auto w-full cursor-pointer h-1 border-0 bg-transparent p-0 focus:outline-none dark:border-[#4f4f4f] Set styles to the main container element of slider.
    hand apperance-none absolute top-[50%] border-0 -mt-1 h-4 w-4 cursor-pointer rounded-[50%] border-0 bg-primary transition-colors ease-in-out will-change-transform active:bg-[#c4d4ef] active:z-60 Set styles to the hand/range element of slider.
    tooltip absolute -top-[18px] origin-[50%_50%] -translate-x-[6px] -rotate-45 scale-0 rounded-bl-none rounded-br-2xl rounded-tl-2xl rounded-tr-2xl bg-primary text-white transition-all duration-[200ms] data-[twe-active]:-top-[38px] data-[twe-active]:scale-100 Set styles to the tooltip element of slider.
    tooltipValue block h-[30px] w-[30px] -translate-x-[6px] translate-y-[6px] rotate-45 text-center text-[10px] Set styles to the tooltip value element of slider.

    Methods

    Method Description Example
    dispose Disposes a multi range slider instance. mySlider.dispose()
    getInstance Static method which allows you to get the multi range slider instance associated to a DOM element. MultiRangeSlider.getInstance(mySlider)
    getOrCreateInstance Static method which returns the multi range slider instance associated to a DOM element or create a new one in case it wasn't initialized. MultiRangeSlider.getOrCreateInstance(mySlider)
    • javascript
    • umd
            
                       
            const sliderEl = document.querySelector('#sliderEl');
            const mySlider = new MultiRangeSlider(sliderEl);
            mySlider.dispose();
            
            
        
            
                
            const sliderEl = document.querySelector('#sliderEl');
            const mySlider = new twe.MultiRangeSlider(sliderEl);
            mySlider.dispose();
            
            
        

    Events

    Event type Description
    valueChanged.twe.multiRangeSlider This event fires when value is changed by moving the slider.
    • JavaScript
            
                
            const mySlider = document.querySelector('#mySlider1')
            mySlider.addEventListener('valueChanged.twe.multiRangeSlider', (e) => {
              // do something...
            })
            
            
        
    • Import
    • Usage
    • Options
    • Classes
    • Methods
    Get useful tips & free resources directly to your inbox along with exclusive subscriber-only content.
    Join our mailing list now
    © 2024 Copyright: MDBootstrap.com

    Access restricted

    To view this section you must have an active PRO account

    Log in to your account or purchase an TWE subscription if you don't have one.

    Buy TWE PRO