Tailwind CSS Advanced Range Slider

Advanced Range Slider for creating custom sliders.

Installation

To get started, install Advanced Range Slider plugin via npm, else you can skip this step if you are already using Preline UI as a package.

                      
                        npm i nouislider @preline/range-slider

Example

Here is a basic example of a Range Slider.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

                                              <div data-hs-range-slider='{
                          "start": 50,
                          "connect": "lower",
                          "range": {
                            "min": 0,
                            "max": 100
                          }
                        }'></div>

JavaScript behavior

Data Options

Name	Description	Options	Default value
`data-hs-range-slider`	Activate a Range Slider by specifying on an element. Should be added to the initialized element. Since our plugin is an extension of the noUiSlider plugin, all its options can be passed as parameters to our plugin.	—	—
`:disabled`	Makes the element unavailable for interaction.	boolean	`false`
`:formatter`	Output value formatting options.	string \| object	`—`
`:formatter:type`	Defines an output formatter type.	"integer" \| "thousandsSeparatorAndDecimalPoints" \| null	`null`
`:formatter:prefix`	Adds a prefix to the output.	string	`—`
`:formatter:postfix`	Adds a postfix to the output.	string	`—`

Tailwind Modifiers

Name	Description
`hs-range-slider-disabled:*`	A modifier that allows you to set Tailwind classes when slider has "disabled" attribute set to "true".

Methods

The HSRangeSlider object is contained within the global window object

Method	Description
Public methods
`formattedValue`	Returns the current values formatted using the `formatter` option.
Static methods
`HSSelect.getInstance(target, isInstance)`	Returns the element associated to the `target`. `target` should be a Node or string (valid selector) `isInstance` boolean. Returns the instance instead of Node if `true`

Events

noUiSlider Events

Note that all events available in the noUiSlider plugin are also available in our plugin, just use el.noUiSLider to handle events.

Method	Description	Returning value
`on:update`	Called when any item was selected.	`[integer, integer?]`

When slider updates event example.

                      
                        const { element } = HSRangeSlider.getInstance('#range-slider', true);

                        element.el.noUiSlider.on('update', (values) => {
                          console.log(element.formattedValue);
                        });

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Check out Preline UI Components

Tailwind CSS Advanced Range Slider

noUiSlider Events

On this page