Docs
Third-Party Plugins
Range Slider Plugin

Tailwind CSS Range Slider Plugin

Build advanced Tailwind CSS range sliders with noUiSlider, including multi-handle ranges, tooltips, pips, formatted values, and JavaScript methods.

Requires Additional Installation

Note that this component requires the use of the third-party noUiSlider plugin.

Learn more

Requires JS

Note that this component requires the use of our Advanced Range Slider plugin, else you can skip this message if you are already using Preline UI as a package.

Learn more

Installation

Install noUiSlider.

Install nouislider via npm

Terminal

                          
                            npm i nouislider

Add the noUiSLider JavaScript

Include the JavaScript <script> near the end of your </body> tag:
<script src="./assets/vendor/nouislider/dist/nouislider.min.js"></script>
HTML
```
                          
                        
```

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": 50,
                              "connect": "lower",
                              "range": {
                                "min": 0,
                                "max": 100
                              },
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1"
                              }
                            }'></div>
                          </div>

Gradient track

Use a gradient-filled lower track to emphasize the selected value.

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": 50,
                              "connect": "lower",
                              "range": {
                                "min": 0,
                                "max": 100
                              },
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full bg-linear-to-r from-primary-50 to-primary-600 origin-top-left dark:from-primary-500/20 dark:to-primary-500",
                                "touchArea": "absolute -inset-1"
                              }
                            }'></div>
                          </div>

Disabled slider

Set disabled to true to prevent interaction and show a non-editable slider state.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-16">
                          <div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": 50,
                              "disabled": true,
                              "connect": "lower",
                              "range": {
                                "min": 0,
                                "max": 100
                              },
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface hs-range-slider-disabled:pointer-events-none",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4 hs-range-slider-disabled:border-primary/50",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden hs-range-slider-disabled:opacity-50",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1"
                              }
                            }'></div>
                          </div>
                          
                            
                            <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                            <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": 50,
                              "disabled": true,
                              "connect": "lower",
                              "range": {
                                "min": 0,
                                "max": 100
                              },
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface hs-range-slider-disabled:pointer-events-none",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4 hs-range-slider-disabled:border-primary/50",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden hs-range-slider-disabled:opacity-50",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1"
                              }
                            }'></div>
                          </div>

Stepped values

Use the step option to limit the slider to fixed value increments.

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": 3,
                              "connect": "lower",
                              "range": {
                                "min": 0,
                                "max": 5
                              },
                              "step": 1,
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1"
                              }
                            }'></div>
                          </div>

Set tooltips to true to show the current handle value in a tooltip.

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": 50,
                              "connect": "lower",
                              "range": {
                                "min": 0,
                                "max": 100
                              },
                              "tooltips": true,
                              "formatter": "integer",
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1",
                                "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4"
                              }
                            }'></div>
                          </div>

Range slider

Set start to an array of two values to create a two-handle range slider.

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": [25, 75],
                              "range": {
                                "min": 0,
                                "max": 100
                              },
                              "connect": true,
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1"
                              }
                            }'></div>
                          </div>

Combine range mode with tooltips to show both handle values while dragging.

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": [25, 75],
                              "range": {
                                "min": 0,
                                "max": 100
                              },
                              "connect": true,
                              "tooltips": true,
                              "formatter": "integer",
                              "cssClasses": {
                                "target": "relative h-2 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1",
                                "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4"
                              }
                            }'></div>
                          </div>

Slider pips

Configure the pips option to display tick marks and labels along the slider.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-16">
                          <div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": [140, 300],
                              "range": {
                                "min": 0,
                                "max": 500
                              },
                              "connect": true,
                              "pips": {
                                "mode": "values",
                                "values": [0, 125, 250, 375, 500],
                                "density": 20
                              },
                              "tooltips": true,
                              "formatter": "integer",
                              "cssClasses": {
                                "target": "relative h-2 mb-10 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1",
                                "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4",
                                "pips": "relative w-full h-10 mt-1",
                                "value": "absolute top-4 -translate-x-2/4 text-sm text-muted-foreground",
                                "marker": "absolute h-4 border-s border-line-4"
                              }
                            }'></div>
                          </div>
                          
                            
                            <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                            <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": [140, 300],
                              "range": {
                                "min": 0,
                                "max": 500
                              },
                              "connect": true,
                              "pips": {
                                "mode": "values",
                                "values": [0, 125, 250, 375, 500],
                                "density": 20
                              },
                              "tooltips": true,
                              "formatter": "integer",
                              "cssClasses": {
                                "target": "relative h-2 mb-10 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1",
                                "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4",
                                "pips": "relative w-full h-10 mt-1",
                                "value": "absolute top-4 -translate-x-2/4 text-sm text-muted-foreground",
                                "marker": "absolute h-4 border-s border-line-4"
                              }
                            }'></div>
                          </div>

Automatic pips

Generate pips automatically based on the configured step intervals.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" class="relative min-h-full h-full">
                            <head>
                              <meta charset="utf-8">
                              <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                              <title>Preline UI</title>
                              <link rel="shortcut icon" href="../../favicon.ico">
                              <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                              <link rel="stylesheet" href="../../assets/css/main.min.css">
                            </head>
                            <body class="w-full max-w-xl mx-auto mt-16">
                          <div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": [140, 300],
                              "range": {
                                "min": 0,
                                "max": 500
                              },
                              "connect": true,
                              "pips": {
                                "mode": "count",
                                "values": 5
                              },
                              "tooltips": true,
                              "formatter": {
                                "type": "integer",
                                "prefix": "$"
                              },
                              "cssClasses": {
                                "target": "relative h-2 mb-10 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1",
                                "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4",
                                "pips": "relative w-full h-10 mt-1",
                                "value": "absolute top-4 -translate-x-2/4 text-sm text-muted-foreground",
                                "marker": "absolute border-s border-line-4",
                                "markerNormal": "h-2",
                                "markerLarge": "h-4"
                              }
                            }'></div>
                          </div>
                          
                            
                            <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                            <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                              <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            </body>
                          </html>

<div class="w-full">
                            <label class="sr-only">Example range</label>
                            <div data-hs-range-slider='{
                              "start": [140, 300],
                              "range": {
                                "min": 0,
                                "max": 500
                              },
                              "connect": true,
                              "pips": {
                                "mode": "count",
                                "values": 5
                              },
                              "tooltips": true,
                              "formatter": {
                                "type": "integer",
                                "prefix": "$"
                              },
                              "cssClasses": {
                                "target": "relative h-2 mb-10 rounded-full bg-surface",
                                "base": "size-full relative z-1",
                                "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                "touchArea": "absolute -inset-1",
                                "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4",
                                "pips": "relative w-full h-10 mt-1",
                                "value": "absolute top-4 -translate-x-2/4 text-sm text-muted-foreground",
                                "marker": "absolute border-s border-line-4",
                                "markerNormal": "h-2",
                                "markerLarge": "h-4"
                              }
                            }'></div>
                          </div>

Output to HTML element

Use the update event to write the current slider value into another HTML element.

<div class="text-sm font-medium mt-5 text-foreground">Value: <span id="hs-pass-value-to-html-element-target" class="text-primary">750</span></div>
                        </div>
                        
                          
                          <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                          <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const range = document.querySelector('#hs-pass-value-to-html-element');
                                  const rangeInstance = new HSRangeSlider(range);
                                  const target = document.querySelector('#hs-pass-value-to-html-element-target');

range.noUiSlider.on('update', (values) => target.innerText = rangeInstance.formattedValue);
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div class="w-full">
                          <label class="sr-only">Example range</label>
                          <div id="hs-pass-value-to-html-element" class="--prevent-on-load-init" data-hs-range-slider='{
                            "start": 750,
                            "connect": "lower",
                            "range": {
                              "min": 0,
                              "max": 1000
                            },
                            "tooltips": true,
                            "formatter": "integer",
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1",
                              "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4"
                            }
                          }'></div>

Range output to HTML elements

Use the update event to write the min and max handle values into separate elements.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../../assets/css/main.min.css">
                          </head>
                          <body class="w-full max-w-xl mx-auto mt-10">
                        <div class="w-full">
                          <div class="flex justify-center w-full mb-5">
                            <div class="flex items-center text-sm text-foreground">
                              <div id="hs-pass-values-to-html-elements-min-target" class="text-center min-w-16">250</div>
                              -
                              <div id="hs-pass-values-to-html-elements-max-target" class="text-center min-w-16">750</div>
                            </div>
                          </div>
                          <label class="sr-only">Example range</label>
                          <div id="hs-pass-values-to-html-elements" class="--prevent-on-load-init" data-hs-range-slider='{
                            "start": [250, 750],
                            "range": {
                              "min": 0,
                              "max": 1000
                            },
                            "formatter": {
                              "type": "integer",
                              "prefix": "$"
                            },
                            "connect": true,
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1"
                            }
                          }'></div>
                        </div>
                        
                          
                          <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                          <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const range = document.querySelector('#hs-pass-values-to-html-elements');
                                  const rangeInstance = new HSRangeSlider(range);
                                  const min = document.querySelector('#hs-pass-values-to-html-elements-min-target');
                                  const max = document.querySelector('#hs-pass-values-to-html-elements-max-target');

range.noUiSlider.on('update', (values) => {
                                    min.innerText = rangeInstance.formattedValue[0];
                                    max.innerText = rangeInstance.formattedValue[1];
                                  });
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div class="w-full">
                          <div class="flex justify-center w-full mb-5">
                            <div class="flex items-center text-sm text-foreground">
                              <div id="hs-pass-values-to-html-elements-min-target" class="text-center min-w-16">250</div>
                              -
                              <div id="hs-pass-values-to-html-elements-max-target" class="text-center min-w-16">750</div>
                            </div>
                          </div>
                          <label class="sr-only">Example range</label>
                          <div id="hs-pass-values-to-html-elements" class="--prevent-on-load-init" data-hs-range-slider='{
                            "start": [250, 750],
                            "range": {
                              "min": 0,
                              "max": 1000
                            },
                            "formatter": {
                              "type": "integer",
                              "prefix": "$"
                            },
                            "connect": true,
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1"
                            }
                          }'></div>
                        </div>

Formatted values

Format slider output with thousands separators and decimal precision before displaying it.

<!DOCTYPE html>
                        <html lang="en" dir="ltr" class="relative min-h-full h-full">
                          <head>
                            <meta charset="utf-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                            <title>Preline UI</title>
                            <link rel="shortcut icon" href="../../favicon.ico">
                            <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                            <link rel="stylesheet" href="../../assets/css/main.min.css">
                          </head>
                          <body class="w-full max-w-xl mx-auto mt-10">
                        <div class="w-full">
                          <div class="flex justify-center w-full mb-5">
                            <div class="flex items-center text-sm text-foreground">
                              <div id="hs-thousands-separators-and-decimal-points-min-target" class="text-center min-w-36">250</div>
                              -
                              <div id="hs-thousands-separators-and-decimal-points-max-target" class="text-center min-w-36">750</div>
                            </div>
                          </div>
                          <label class="sr-only">Example range</label>
                          <div id="hs-thousands-separators-and-decimal-points" class="--prevent-on-load-init" data-hs-range-slider='{
                            "start": [2500000, 7500000],
                            "range": {
                              "min": 0,
                              "max": 10000000
                            },
                            "connect": true,
                            "formatter": {
                              "prefix": "USD ",
                              "type": "thousandsSeparatorAndDecimalPoints"
                            },
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1"
                            }
                          }'></div>
                        </div>
                        
                          
                          <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                          <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const range = document.querySelector('#hs-thousands-separators-and-decimal-points');
                                  const rangeInstance = new HSRangeSlider(range);
                                  const min = document.querySelector('#hs-thousands-separators-and-decimal-points-min-target');
                                  const max = document.querySelector('#hs-thousands-separators-and-decimal-points-max-target');

<div class="w-full">
                          <div class="flex justify-center w-full mb-5">
                            <div class="flex items-center text-sm text-foreground">
                              <div id="hs-thousands-separators-and-decimal-points-min-target" class="text-center min-w-36">250</div>
                              -
                              <div id="hs-thousands-separators-and-decimal-points-max-target" class="text-center min-w-36">750</div>
                            </div>
                          </div>
                          <label class="sr-only">Example range</label>
                          <div id="hs-thousands-separators-and-decimal-points" class="--prevent-on-load-init" data-hs-range-slider='{
                            "start": [2500000, 7500000],
                            "range": {
                              "min": 0,
                              "max": 10000000
                            },
                            "connect": true,
                            "formatter": {
                              "prefix": "USD ",
                              "type": "thousandsSeparatorAndDecimalPoints"
                            },
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1"
                            }
                          }'></div>
                        </div>

Output to input

Use the update event to sync the current slider value to an input field.

Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

<div class="mt-5 max-w-20">
                            <input id="hs-pass-value-to-input-target" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="text" value="750">
                          </div>
                        </div>
                        
                          
                          <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                          <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const range = document.querySelector('#hs-pass-value-to-input');
                                  const rangeInstance = new HSRangeSlider(range);
                                  const target = document.querySelector('#hs-pass-value-to-input-target');

range.noUiSlider.on('update', (values) => target.value = rangeInstance.formattedValue);
                                  target.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set(evt.target.value)), 200);
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div class="w-full">
                          <label class="sr-only">Example range</label>
                          <div id="hs-pass-value-to-input" class="--prevent-on-load-init" data-hs-range-slider='{
                            "start": 750,
                            "connect": "lower",
                            "range": {
                              "min": 0,
                              "max": 1000
                            },
                            "tooltips": true,
                            "formatter": "integer",
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1",
                              "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4"
                            }
                          }'></div>

Range output to inputs

Use the update event to keep two input fields in sync with the range handles.

Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

<div class="flex flex-row space-x-4 mt-5">
                            <div class="basis-1/2">
                              <label for="hs-pass-values-to-inputs-min-target" class="block text-sm font-medium mb-2 text-foreground">Min price:</label>
                              <input id="hs-pass-values-to-inputs-min-target" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="number" value="250">
                            </div>
                            <div class="basis-1/2">
                              <label for="hs-pass-values-to-inputs-max-target" class="block text-sm font-medium mb-2 text-foreground">Max price:</label>
                              <input id="hs-pass-values-to-inputs-max-target" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="number" value="750">
                            </div>
                          </div>
                        </div>
                        
                          
                          <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                          <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const range = document.querySelector('#hs-pass-values-to-inputs');
                                  const rangeInstance = new HSRangeSlider(range);
                                  const min = document.querySelector('#hs-pass-values-to-inputs-min-target');
                                  const max = document.querySelector('#hs-pass-values-to-inputs-max-target');

range.noUiSlider.on('update', (values) => {
                                    min.value = rangeInstance.formattedValue[0];
                                    max.value = rangeInstance.formattedValue[1];
                                  });
                                  min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                                  max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div class="w-full">
                          <label class="sr-only">Example range</label>
                          <div id="hs-pass-values-to-inputs" class="--prevent-on-load-init" data-hs-range-slider='{
                            "start": [250, 750],
                            "range": {
                              "min": 0,
                              "max": 1000
                            },
                            "connect": true,
                            "tooltips": true,
                            "formatter": "integer",
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1",
                              "tooltip": "bg-layer border border-layer-line text-sm text-layer-foreground py-1 px-2 rounded-lg mb-3 absolute bottom-full inset-s-2/4 -translate-x-2/4"
                            }
                          }'></div>

range.noUiSlider.on('update', (values) => {
                                min.value = rangeInstance.formattedValue[0];
                                max.value = rangeInstance.formattedValue[1];
                              });
                              min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                              max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));
                            })();
                          });
                        </script>

Range with charts

Use the update event values to drive a highlighted range on the foreground chart.

Requires Additional Installation

Note that this demo requires the use of the third-party Apexcharts plugin and Preline Charts helper.

Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

foregroundParent.style.left = `${from}%`;
                                    foregroundParent.style.width = `${width}%`;
                                    foreground.style.width = `${foregroundParent.parentElement.clientWidth}px`;
                                    foreground.style.marginLeft = `${-((foregroundParent.parentElement.clientWidth / 100) * from)}px`;
                                  };

const range = document.querySelector('#hs-range-with-charts');
                                  const rangeInstance = new HSRangeSlider(range);
                                  const min = document.querySelector('#hs-pass-charts-values-to-inputs-min-target');
                                  const max = document.querySelector('#hs-pass-charts-values-to-inputs-max-target');
                                  const background = document.querySelector('#hs-range-with-charts-bar-chart-background');
                                  const foreground = document.querySelector('#hs-range-with-charts-bar-chart-foreground');
                                  const foregroundParent = foreground.parentElement;

buildChart('#hs-range-with-charts-bar-chart-background', (mode) => ({
                                    series: [{
                                      name: 'Sales',
                                      data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                    }],
                                    chart: {
                                      height: 150,
                                      type: 'bar',
                                      sparkline: {
                                        enabled: true
                                      }
                                    },
                                    xaxis: {
                                      type: 'category',
                                      crosshairs: {
                                        show: false
                                      }
                                    },
                                    states: {
                                      hover: {
                                        filter: {
                                          type: 'none'
                                        }
                                      },
                                      active: {
                                        allowMultipleDataPointsSelection: false,
                                        filter: {
                                          type: 'none'
                                        }
                                      }
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-chart-8')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border')
                                    }
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-chart-8-inverse')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8-inverse')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border-inverse')
                                    }
                                  }));
                                  buildChart('#hs-range-with-charts-bar-chart-foreground', (mode) => ({
                                    series: [{
                                      name: 'Sales',
                                      data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                    }],
                                    chart: {
                                      height: 150,
                                      type: 'bar',
                                      sparkline: {
                                        enabled: true
                                      }
                                    },
                                    xaxis: {
                                      type: 'category',
                                      crosshairs: {
                                        show: false
                                      }
                                    },
                                    states: {
                                      hover: {
                                        filter: {
                                          type: 'none'
                                        }
                                      },
                                      active: {
                                        allowMultipleDataPointsSelection: false,
                                        filter: {
                                          type: 'none'
                                        }
                                      }
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-primary')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border')
                                    }
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-primary-inverse')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8-inverse')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border-inverse')
                                    }
                                  }));

range.noUiSlider.on('update', (values) => {
                                    min.value = rangeInstance.formattedValue[0];
                                    max.value = rangeInstance.formattedValue[1];

updateForegroundChart(foregroundParent, foreground, values);
                                  });

min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                                  max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));

window.addEventListener("resize", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div class="w-full">
                          <label class="sr-only">Example range</label>
                          <div class="relative">
                            <div id="hs-range-with-charts-bar-chart-background"></div>
                            <div class="absolute top-0 inset-s-0 size-full overflow-hidden">
                              <div id="hs-range-with-charts-bar-chart-foreground"></div>
                            </div>
                          </div>
                          <div id="hs-range-with-charts" class="mt-4 --prevent-on-load-init" data-hs-range-slider='{
                            "start": [250, 750],
                            "range": {
                              "min": 0,
                              "max": 1000
                            },
                            "connect": true,
                            "formatter": "integer",
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 z-2 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1"
                            }
                          }'></div>

foregroundParent.style.left = `${from}%`;
                                foregroundParent.style.width = `${width}%`;
                                foreground.style.width = `${foregroundParent.parentElement.clientWidth}px`;
                                foreground.style.marginLeft = `${-((foregroundParent.parentElement.clientWidth / 100) * from)}px`;
                              };

const range = document.querySelector('#hs-range-with-charts');
                              const rangeInstance = new HSRangeSlider(range);
                              const min = document.querySelector('#hs-pass-charts-values-to-inputs-min-target');
                              const max = document.querySelector('#hs-pass-charts-values-to-inputs-max-target');
                              const background = document.querySelector('#hs-range-with-charts-bar-chart-background');
                              const foreground = document.querySelector('#hs-range-with-charts-bar-chart-foreground');
                              const foregroundParent = foreground.parentElement;

buildChart('#hs-range-with-charts-bar-chart-background', (mode) => ({
                                series: [{
                                  name: 'Sales',
                                  data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                }],
                                chart: {
                                  height: 150,
                                  type: 'bar',
                                  sparkline: {
                                    enabled: true
                                  }
                                },
                                xaxis: {
                                  type: 'category',
                                  crosshairs: {
                                    show: false
                                  }
                                },
                                states: {
                                  hover: {
                                    filter: {
                                      type: 'none'
                                    }
                                  },
                                  active: {
                                    allowMultipleDataPointsSelection: false,
                                    filter: {
                                      type: 'none'
                                    }
                                  }
                                },
                                tooltip: {
                                  enabled: false
                                },
                              }), () => ({
                                colors: [varToColor('--chart-colors-chart-8')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border')
                                }
                              }), () => ({
                                colors: [varToColor('--chart-colors-chart-8-inverse')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8-inverse')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border-inverse')
                                }
                              }));
                              buildChart('#hs-range-with-charts-bar-chart-foreground', (mode) => ({
                                series: [{
                                  name: 'Sales',
                                  data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                }],
                                chart: {
                                  height: 150,
                                  type: 'bar',
                                  sparkline: {
                                    enabled: true
                                  }
                                },
                                xaxis: {
                                  type: 'category',
                                  crosshairs: {
                                    show: false
                                  }
                                },
                                states: {
                                  hover: {
                                    filter: {
                                      type: 'none'
                                    }
                                  },
                                  active: {
                                    allowMultipleDataPointsSelection: false,
                                    filter: {
                                      type: 'none'
                                    }
                                  }
                                },
                                tooltip: {
                                  enabled: false
                                },
                              }), () => ({
                                colors: [varToColor('--chart-colors-primary')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border')
                                }
                              }), () => ({
                                colors: [varToColor('--chart-colors-primary-inverse')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8-inverse')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border-inverse')
                                }
                              }));

range.noUiSlider.on('update', (values) => {
                                min.value = rangeInstance.formattedValue[0];
                                max.value = rangeInstance.formattedValue[1];

updateForegroundChart(foregroundParent, foreground, values);
                              });

min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                              max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));

window.addEventListener("resize", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
                            })();
                          });
                        </script>

Use the update event values to drive a highlighted chart range inside a modal.

Requires Additional Installation

Note that this demo requires the use of the third-party Apexcharts plugin and Preline Charts helper.

Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

<div id="hs-modal-example" class="hs-overlay hidden size-full fixed top-0 inset-s-0 z-80 overflow-x-hidden overflow-y-auto pointer-events-none" role="dialog" tabindex="-1" aria-labelledby="hs-modal-example-label">
                          <div class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
                            <div class="flex flex-col bg-overlay border border-overlay-line shadow-2xs rounded-xl pointer-events-auto">
                              <div class="flex justify-between items-center py-3 px-4 border-b border-overlay-header">
                                <h3 id="hs-modal-example-label" class="font-semibold text-foreground">
                                  Modal example
                                </h3>
                                <button type="button" class="size-8 inline-flex justify-center items-center gap-x-2 rounded-full bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover focus:outline-hidden focus:bg-surface-focus disabled:opacity-50 disabled:pointer-events-none" aria-label="Close" data-hs-overlay="#hs-modal-example">
                                  <span class="sr-only">Close</span>
                                  <svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                                </button>
                              </div>
                              <div class="p-4 min-h-32 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-none [&::-webkit-scrollbar-track]:bg-scrollbar-track [&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb">
                                
                                <div class="w-full">
                                  <label class="sr-only">Example range</label>
                                  <div class="relative">
                                    <div id="hs-range-with-charts-in-modal-bar-chart-background"></div>
                                    <div class="absolute top-0 inset-s-0 size-full overflow-hidden">
                                      <div id="hs-range-with-charts-in-modal-bar-chart-foreground"></div>
                                    </div>
                                  </div>
                                  <div id="hs-range-with-charts-in-modal" class="mt-4 --prevent-on-load-init" data-hs-range-slider='{
                                    "start": [250, 750],
                                    "range": {
                                      "min": 0,
                                      "max": 1000
                                    },
                                    "connect": true,
                                    "formatter": "integer",
                                    "cssClasses": {
                                      "target": "relative h-2 rounded-full bg-surface",
                                      "base": "size-full relative z-1",
                                      "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                                      "handle": "absolute top-1/2 inset-e-0 z-2 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                      "connects": "relative z-0 size-full rounded-full overflow-hidden",
                                      "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                                      "touchArea": "absolute -inset-1"
                                    }
                                  }'></div>

<div class="mt-5">
                                    <div class="text-sm font-medium mb-2 text-foreground">Custom range:</div>
                                    <div class="flex flex-row space-x-4">
                                      <div class="basis-1/2">
                                        <input id="hs-pass-charts-in-modal-values-to-inputs-min-target" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="number" value="250">
                                      </div>
                                      <div class="basis-1/2">
                                        <input id="hs-pass-charts-in-modal-values-to-inputs-max-target" class="py-2.5 sm:py-3 px-4 block w-full bg-layer border-layer-line rounded-lg sm:text-sm text-foreground placeholder:text-muted-foreground-1 focus:border-primary-focus focus:ring-primary-focus disabled:opacity-50 disabled:pointer-events-none" type="number" value="750">
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                
                              </div>
                              <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-overlay-footer">
                                <button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-layer border border-layer-line text-layer-foreground shadow-2xs hover:bg-layer-hover focus:outline-hidden focus:bg-layer-focus disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#hs-modal-example">
                                  Close
                                </button>
                                <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" href="#">
                                  Save changes
                                </a>
                              </div>
                            </div>
                          </div>
                        </div>
                        
                            
                            <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                            <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/apexcharts/dist/apexcharts.min.js"></script>
                            
                            <script src="https://cdn.jsdelivr.net/npm/culori@4.0.2/bundled/culori.umd.min.js"></script>

const range = document.querySelector('#hs-range-with-charts-in-modal');
                                  const rangeInstance = new HSRangeSlider(range);
                                  const min = document.querySelector('#hs-pass-charts-in-modal-values-to-inputs-min-target');
                                  const max = document.querySelector('#hs-pass-charts-in-modal-values-to-inputs-max-target');
                                  const background = document.querySelector('#hs-range-with-charts-in-modal-bar-chart-background');
                                  const foreground = document.querySelector('#hs-range-with-charts-in-modal-bar-chart-foreground');
                                  const foregroundParent = foreground.parentElement;

buildChart('#hs-range-with-charts-in-modal-bar-chart-background', (mode) => ({
                                    series: [{
                                      name: 'Sales',
                                      data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                    }],
                                    chart: {
                                      height: 150,
                                      type: 'bar',
                                      sparkline: {
                                        enabled: true
                                      }
                                    },
                                    xaxis: {
                                      type: 'category',
                                      crosshairs: {
                                        show: false
                                      }
                                    },
                                    states: {
                                      hover: {
                                        filter: {
                                          type: 'none'
                                        }
                                      },
                                      active: {
                                        allowMultipleDataPointsSelection: false,
                                        filter: {
                                          type: 'none'
                                        }
                                      }
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-chart-8')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border')
                                    }
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-chart-8-inverse')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8-inverse')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border-inverse')
                                    }
                                  }));
                                  buildChart('#hs-range-with-charts-in-modal-bar-chart-foreground', (mode) => ({
                                    series: [{
                                      name: 'Sales',
                                      data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                    }],
                                    chart: {
                                      height: 150,
                                      type: 'bar',
                                      sparkline: {
                                        enabled: true
                                      }
                                    },
                                    xaxis: {
                                      type: 'category',
                                      crosshairs: {
                                        show: false
                                      }
                                    },
                                    states: {
                                      hover: {
                                        filter: {
                                          type: 'none'
                                        }
                                      },
                                      active: {
                                        allowMultipleDataPointsSelection: false,
                                        filter: {
                                          type: 'none'
                                        }
                                      }
                                    },
                                    tooltip: {
                                      enabled: false
                                    },
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-primary')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border')
                                    }
                                  }), () => ({
                                    colors: [varToColor('--chart-colors-primary-inverse')],
                                    plotOptions: {
                                      bar: {
                                        colors: {
                                          ranges: [{
                                            from: -45,
                                            to: 0,
                                            color: varToColor('--chart-colors-chart-8-inverse')
                                          }]
                                        }
                                      }
                                    },
                                    grid: {
                                      borderColor: varToColor('--chart-colors-grid-border-inverse')
                                    }
                                  }));

updateForegroundChart(foregroundParent, foreground, values);
                                  });

window.addEventListener("resize", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));

// Please add it for the popup to work correctly.
                                  const popup = HSOverlay.getInstance('#hs-modal-example', true);

if (popup) popup.element.on('open', () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
                                })();
                              });
                            </script>
                          </body>
                        </html>
                    
                        <script>
                          window.addEventListener('load', () => {
                            setTimeout(() => {
                              document.querySelectorAll('.hs-overlay').forEach((el) => HSOverlay.open(el));
                            });
                          });
                        </script>

<div class="flex justify-center">
                          
                          <button type="button" class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-medium rounded-lg bg-primary border border-primary-line text-primary-foreground hover:bg-primary-hover focus:outline-hidden focus:bg-primary-focus disabled:opacity-50 disabled:pointer-events-none" aria-haspopup="dialog" aria-expanded="false" aria-controls="hs-modal-example" data-hs-overlay="#hs-modal-example">
                            Open modal
                          </button>
                          
                        </div>

foregroundParent.style.left = `${from}%`;
                                foregroundParent.style.width = `${width}%`;
                                foreground.style.width = `${foregroundParent.parentElement.clientWidth}px`;
                                foreground.style.marginLeft = `${-((foregroundParent.parentElement.clientWidth / 100) * from)}px`;
                              };

const range = document.querySelector('#hs-range-with-charts-in-modal');
                              const rangeInstance = new HSRangeSlider(range);
                              const min = document.querySelector('#hs-pass-charts-in-modal-values-to-inputs-min-target');
                              const max = document.querySelector('#hs-pass-charts-in-modal-values-to-inputs-max-target');
                              const background = document.querySelector('#hs-range-with-charts-in-modal-bar-chart-background');
                              const foreground = document.querySelector('#hs-range-with-charts-in-modal-bar-chart-foreground');
                              const foregroundParent = foreground.parentElement;

buildChart('#hs-range-with-charts-in-modal-bar-chart-background', (mode) => ({
                                series: [{
                                  name: 'Sales',
                                  data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                }],
                                chart: {
                                  height: 150,
                                  type: 'bar',
                                  sparkline: {
                                    enabled: true
                                  }
                                },
                                xaxis: {
                                  type: 'category',
                                  crosshairs: {
                                    show: false
                                  }
                                },
                                states: {
                                  hover: {
                                    filter: {
                                      type: 'none'
                                    }
                                  },
                                  active: {
                                    allowMultipleDataPointsSelection: false,
                                    filter: {
                                      type: 'none'
                                    }
                                  }
                                },
                                tooltip: {
                                  enabled: false
                                },
                              }), () => ({
                                colors: [varToColor('--chart-colors-chart-8')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border')
                                }
                              }), () => ({
                                colors: [varToColor('--chart-colors-chart-8-inverse')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8-inverse')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border-inverse')
                                }
                              }));
                              buildChart('#hs-range-with-charts-in-modal-bar-chart-foreground', (mode) => ({
                                series: [{
                                  name: 'Sales',
                                  data: [21, 20, 24, 45, 47, 50, 60, 70, 80, 75, 65, 55, 50, 40, 30, 30, 35, 45, 50, 60, 70, 80, 75, 65, 55, 50, 40, 35, 40]
                                }],
                                chart: {
                                  height: 150,
                                  type: 'bar',
                                  sparkline: {
                                    enabled: true
                                  }
                                },
                                xaxis: {
                                  type: 'category',
                                  crosshairs: {
                                    show: false
                                  }
                                },
                                states: {
                                  hover: {
                                    filter: {
                                      type: 'none'
                                    }
                                  },
                                  active: {
                                    allowMultipleDataPointsSelection: false,
                                    filter: {
                                      type: 'none'
                                    }
                                  }
                                },
                                tooltip: {
                                  enabled: false
                                },
                              }), () => ({
                                colors: [varToColor('--chart-colors-primary')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border')
                                }
                              }), () => ({
                                colors: [varToColor('--chart-colors-primary-inverse')],
                                plotOptions: {
                                  bar: {
                                    colors: {
                                      ranges: [{
                                        from: -45,
                                        to: 0,
                                        color: varToColor('--chart-colors-chart-8-inverse')
                                      }]
                                    }
                                  }
                                },
                                grid: {
                                  borderColor: varToColor('--chart-colors-grid-border-inverse')
                                }
                              }));

range.noUiSlider.on('update', (values) => {
                                min.value = rangeInstance.formattedValue[0];
                                max.value = rangeInstance.formattedValue[1];

updateForegroundChart(foregroundParent, foreground, values);
                              });

min.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([evt.target.value, max.value]), 200));
                              max.addEventListener('input', _.debounce((evt) => rangeInstance.el.noUiSlider.set([min.value, evt.target.value]), 200));

window.addEventListener("resize", () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));

// Please add it for the popup to work correctly.
                              const popup = HSOverlay.getInstance('#hs-modal-example', true);

if (popup) popup.element.on('open', () => updateForegroundChart(foregroundParent, foreground, range.noUiSlider.get()));
                            })();
                          });
                        </script>

Destroy and reinitialize

Use the destroy method to remove a slider instance, then initialize it again when you need to restore the behavior.

<div class="flex flex-wrap gap-2 mt-10">
                          <button type="button" id="hs-destroy-slider" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-layer border border-layer-line text-layer-foreground hover:bg-layer-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-layer-focus">
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
                            Destroy slider
                          </button>
                          <button type="button" id="hs-auto-init-slider" class="py-1 px-2 inline-flex items-center gap-x-1 text-sm rounded-lg bg-surface border border-surface-line text-surface-foreground hover:bg-surface-hover disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-surface-focus" disabled>
                            <svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
                            Reinitialize slider
                          </button>
                        </div>
                        
                          
                          <script src="../../assets/vendor/nouislider/dist/nouislider.min.js"></script>
                          <script src="../../assets/vendor/lodash/lodash.min.js"></script>
                            <script src="../../assets/vendor/preline/dist/index.js?v=4.2.0"></script>
                            <script>
                              window.addEventListener('load', () => {
                                (function () {
                                  const slider = document.querySelector('#hs-destroy-and-reinitialize');
                                  const destroy = document.querySelector('#hs-destroy-slider');
                                  const autoInit = document.querySelector('#hs-auto-init-slider');

destroy.addEventListener('click', () => {
                                    const {element} = HSRangeSlider.getInstance(slider, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                    autoInit.removeAttribute('disabled');
                                  });

autoInit.addEventListener('click', () => {
                                    HSRangeSlider.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                    destroy.removeAttribute('disabled');
                                  });
                                })();
                              });
                            </script>
                          </body>
                        </html>

<div class="w-full">
                          <label class="sr-only">Example range</label>
                          <div id="hs-destroy-and-reinitialize" data-hs-range-slider='{
                            "start": [25, 75],
                            "range": {
                              "min": 0,
                              "max": 100
                            },
                            "connect": true,
                            "cssClasses": {
                              "target": "relative h-2 rounded-full bg-surface",
                              "base": "size-full relative z-1",
                              "origin": "absolute top-0 inset-e-0 size-full origin-top-left rounded-full",
                              "handle": "absolute top-1/2 inset-e-0 size-4.5 bg-layer border-4 border-primary rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                              "connects": "relative z-0 size-full rounded-full overflow-hidden",
                              "connect": "absolute top-0 inset-e-0 z-1 size-full origin-top-left bg-primary",
                              "touchArea": "absolute -inset-1"
                            }
                          }'></div>
                        </div>

destroy.addEventListener('click', () => {
                                const {element} = HSRangeSlider.getInstance(slider, true);

element.destroy();

destroy.setAttribute('disabled', 'disabled');
                                autoInit.removeAttribute('disabled');
                              });

autoInit.addEventListener('click', () => {
                                HSRangeSlider.autoInit();

autoInit.setAttribute('disabled', 'disabled');
                                destroy.removeAttribute('disabled');
                              });
                            })();
                          });
                        </script>

Tailwind CSS Range Slider Plugin

Installation

Install noUiSlider.

Add the noUiSLider JavaScript

Basic slider

Gradient track

Disabled slider

Stepped values

Tooltip values

Range slider

Range with tooltips

Slider pips

Automatic pips

Output to HTML element

Range output to HTML elements

Formatted values

Output to input

Range output to inputs

Range with charts

Requires Additional Installation

Requires Additional Installation

Destroy and reinitialize