third party plugins

Tailwind CSS Advance Range Slider

The Slider component enables easy, customizable range selection for user settings.

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}ModifierApply tailwind classes when the disabled is true.

Design a unique range slider.

An example showcasing the set of semantic colors.

Sizing for advance range slider.

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

Basic Vertical upper connect example.

Vertical range with tooltip example.

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

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

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

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

Demonstrating the combination of tooltips and range mode.

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

Drawing pips according to the number of steps.

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

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

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

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

Using the update method to pass values as inputs value.

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

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

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

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

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.

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

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.

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-

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();
});
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);
});