Tailwind CSS Multi Range Slider

Basic example

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

HTML
javascript

        
            
      <div data-te-multi-range-slider-init></div>

        
            
      // Initialization for ES Users
      import { MultiRangeSlider, initTE } from "tw-elements";

      initTE({ MultiRangeSlider });

Hey there 👋 we want to make TW 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

Basic example with values

You can show values in another element in the DOM.

Value:

First:

Second:

HTML
javascript
umd

ES UMD

        
            
      <div id="multi-range-basic" data-te-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, initTE } from "tw-elements";

      initTE({ MultiRangeSlider });   

      const basicExample = document.querySelector("#multi-range-basic");
      const oneRangeValueBasic = document.querySelector("#multi-range-basic-value");
    
      basicExample.addEventListener("valueChanged.te.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.te.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-te-number-of-ranges attribute.

HTML
javascript

        
            
      <div data-te-multi-range-slider-init data-te-number-of-ranges="1"></div>

        
            
      // Initialization for ES Users
      import { MultiRangeSlider, initTE } from "tw-elements";

      initTE({ MultiRangeSlider });

Start values

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

Value:

HTML
javascript

        
            
      <div
        id="multi-range-start-values"
        data-te-multi-range-slider-init
        data-te-start-values="[40, 80]"></div>
      <div id="multi-range-start-values-show" class="mt-3">Value:</div>

        
            
      import { MultiRangeSlider, initTE } from "tw-elements";

      initTE({ MultiRangeSlider });      

      const startValue = document.querySelector("#multi-range-start-values");
      const startValueValues = document.querySelector(
        "#multi-range-start-values-show"
      );
    
      startValue.addEventListener("valueChanged.te.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.te.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-te-tooltip attribute.

HTML
javascript

        
            
      <div data-te-multi-range-slider-init data-te-tooltip="true"></div>

        
            
      // Initialization for ES Users
      import { MultiRangeSlider, initTE } from "tw-elements";

      initTE({ MultiRangeSlider });

Step example

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

HTML
javascript

        
            
      <div data-te-multi-range-slider-init data-te-step="5"></div>

        
            
      // Initialization for ES Users
      import { MultiRangeSlider, initTE } from "tw-elements";

      initTE({ MultiRangeSlider });

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 initTE method. If you are going to use the UMD format, just import the tw-elements package.

javascript
umd

ES UMD

        
            
        import { MultiRangeSlider, initTE } from "tw-elements";
        initTE({ MultiRangeSlider });

        
            
        import "tw-elements";

Usage

Via data attributes

Using the component doesn't require any additional JavaScript code - simply add data-te-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 initTE method.

Via JavaScript

javascript
umd

ES UMD

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

        
            
        const basicExample = document.querySelector('.multi-ranges-basic');
        const basicExampleInit = new te.MultiRangeSlider(basicExample);

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-te-, as in data-te-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-te-class, as in data-te-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-[te-active]:-top-[38px] data-[te-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

ES UMD

        
                   
        const sliderEl = document.querySelector('#sliderEl');
        const mySlider = new MultiRangeSlider(sliderEl);
        mySlider.dispose();

        
            
        const sliderEl = document.querySelector('#sliderEl');
        const mySlider = new te.MultiRangeSlider(sliderEl);
        mySlider.dispose();

Events

Event type	Description
`valueChanged.te.multiRangeSlider`	This event fires when value is changed by moving the slider.

JavaScript

        
            
        const mySlider = document.querySelector('#mySlider1')
        mySlider.addEventListener('valueChanged.te.multiRangeSlider', (e) => {
          // do something...
        })

Multi Range Slider

Basic example

Basic example with values

One range

Start values

Tooltips

Step example

Related resources

Tutorials:

Extended Docs:

Design System (Figma):

Multi Range Slider - API

Import

Usage

Via data attributes

Via JavaScript

Options

Classes

Methods

Events