• third party plugins
  • Advance Range Slider

third party plugins

Tailwind CSS Advance Range Slider

The Slider component allows users to select a value or range easily, offering smooth interaction and customizable styling for various settings.

Require FlyonUI JS

Getting started

Setup

Below are the comprehensively outlined steps you can follow to seamlessly integrate noUiSlider with FlyonUI.

  • 1
    Installation

    Install noUiSlider using npm:

    npm i nouislider
  • 2
    Include noUiSlider JavaScript

    Include the following JS files in your page:

    <body>
  <script src="../path/to/vendor/nouislider/dist/nouislider.min.js"></script>
</body>
  • 3
    Initialize noUiSlider

    Basic Initialization: Prefer to design your own style? Here’s a fully unstyled example for customization.

    <div data-range-slider='{
  "start": 50,
  "connect": "lower",
  "range": {
    "min": 0,
    "max": 100
  }
}'></div>
Class Name
Type
Description
range-slider-disabled:{tw-utility-class}VariantApply tailwind classes when the disabled is true.

Basic example

Simple usage

Design a unique range slider.

Color

Semantic colors

An example showcasing the set of semantic colors.

Size

Basic sizing

Sizing for advance range slider.

Orientation

Vertical Default

The orientation setting allows you to configure the slider as either "vertical" or "horizontal", with "horizontal" as the default.

Vertical upper connect

Basic Vertical upper connect example.

Vertical range with tooltip

Vertical range with tooltip example.

Illustrations

Disabled

Set the disabled attribute to true on an element to give it a grayed-out appearance, disable pointer events, and prevent it from being focused. Use range-slider-disabled:{tw-utility-class} to apply styles to the disabled state.

RTL

RTL functionality works differently in noUiSlider; setting dir="rtl" to the html element won’t work. Instead, you need to set direction: "rtl" as an option in data-range-slider.

Steps

Range inputs, by default, “snap” to integer values. To adjust this behavior, set the step attribute to a specific integer value.

Tooltip

Enable the tooltips parameter by setting it to true to display current values within the tooltip.

Range

To enable range mode, set the start parameter to an array containing two values.

Range with Tooltip

Demonstrating the combination of tooltips and range mode.

Pips

To enable the display of pips, set the pips parameter to an object with specific configuration settings.

Pips auto values

Drawing pips according to the number of steps.

Pass value to HTML element

Use the update method to set a value as the text content of an element.

Pass values to HTML elements (Range)

Using the update method to assign values as text to the min and max elements.

Applying Thousand Separators and Decimal Formatting

Using the update method to assign values as text to the min and max elements.

Assign value to input

Using the update method to set values as input field values.

Assign values to multiple input fields

Using the update method to pass values as inputs value.

Range with Charts Example

Using the update method and its returned values to adjust the foreground chart width.

Range with Charts Example (Modal)

Adjust the chart’s foreground width inside a modal using the update method’s return values.

Destroy/Reinitialize

The destroy method is provided to facilitate the destruction of a advance range slider.

Slider behaviour

Tap

A handle snaps to a clicked location. A smooth transition is used. This option is default.

Drag

Enables dragging of the range (the connecting bar between handles). This requires two handles, and the connect option must be set to true. When dragging the range, the slide event triggers for both handles.

Fixed dragging

Maintains a fixed distance between handles when the drag-fixed flag is enabled.

Hover

Enabling this option allows the slider to trigger hover events when a mouse or pen hovers over it, providing the slider value at the hovered position. The event does not trigger while the slider is being dragged with a mouse or pen, but it does activate for touch interactions.

JavaScript behavior

Options

PARAMETERS
DESCRIPTION
OPTIONS
DEFAULT VALUE
data-range-sliderActivate a Range Slider by applying it to a specified element. Attach it to the initialized element. As our plugin extends the noUiSlider plugin, all noUiSlider events can be passed directly as parameters to our plugin.booleanfalse
:disabledDisables user interaction with the element, rendering it inactive.booleanfalse
:formatterCustomizes the output format of the slider values.string/object-
:formatter:typeSets the output format type, such as integer or thousands separator with decimal points.“integer” / “thousandsSeparatorAndDecimalPoints” / null-
:formatter:prefixAdds a prefix to the tooltip’s output value.string-
:formatter:postfixAdds a postfix to the tooltip’s output value.string-

Methods

The HSRangeSlider object is contained within the global window object.

METHOD
DESCRIPTION
PUBLIC METHODS
formattedValueRetrieves the current values, formatted according to the specified formatter option.
destroy()Destroys the instance, removes generated markup (if any), removes added classes and attributes.
STATIC METHODS
HSRangeSlider.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.

Open item (public method), Refer Pass value to HTML element.

// This method is used in above example.
const rangeInstance = new HSRangeSlider(document.querySelector('#range-element'))
const target = document.querySelector('#range-element-target')

range.noUiSlider.on('update', values => (target.innerText = rangeInstance.formattedValue))

Destroy instance.

const { element } = HSRangeSlider.getInstance('#range-slider-to-destroy', true);
const destroyBtn = document.querySelector('#destroy-btn');

destroyBtn.addEventListener('click', () => {
  element.destroy();
});

Events

METHOD
DESCRIPTION
RETURNING VALUE
on:updateCalled when any item was selected.[integer, integer?].

Example of an event triggered when the slider is updated.

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

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