Basic Forms

Tailwind CSS Advanced Range Slider

The Slider component, a type of range input, offers a consistent and customizable way for users to select values within a defined range. This intuitive component is ideal for adjusting settings such as volume, brightness, or for applying filters in various applications.

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

How to use

Install noUiSlider.

Install nouislider via npm
```
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>
```
                    
                  
```

Basic usage

Create custom range slider.

Disabled

Set the disabled parameter to true on an element to give it a grayed out appearance, remove pointer events, and prevent focusing.

Steps

By default, range inputs “snap” to integer values. To change this, you can specify a step attribute with some integer value.

Set the tooltips parameter to true to enable displaying current values in the tooltip.

Range

Set the start parameter to an array of two values to enable range mode.

Combining tooltip and range demo.

Pips

Set the pips parameter to object with settings to enable pips display.

Pips auto values

Drawing pips according to the number of steps.

Pass value to HTML element

Using the update method to pass a value as the text of an element.

Value: 750

Pass values to HTML elements (Range)

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

250

750

Formatting with thousands separators and decimal points

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

250

750

Pass value to input

Using the update method to pass a value as the value of input.

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

Pass values to inputs

Using the update method to pass values as inputs value.

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

Min price:

Max price:

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 Example

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

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

Custom range:

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: ['#f3f4f6'],
                              plotOptions: {
                                bar: {
                                  colors: {
                                    ranges: [{
                                      from: -45,
                                      to: 0,
                                      color: '#e5e7eb'
                                    }]
                                  }
                                }
                              },
                              grid: {
                                borderColor: '#e5e7eb'
                              }
                            }, {
                              colors: ['#ffffff'],
                              plotOptions: {
                                bar: {
                                  colors: {
                                    ranges: [{
                                      from: -45,
                                      to: 0,
                                      color: '#ffffff'
                                    }]
                                  }
                                }
                              },
                              grid: {
                                borderColor: '#404040'
                              }
                            });
                            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: ['#3b82f6'],
                              plotOptions: {
                                bar: {
                                  colors: {
                                    ranges: [{
                                      from: -45,
                                      to: 0,
                                      color: '#e5e7eb'
                                    }]
                                  }
                                }
                              },
                              grid: {
                                borderColor: '#e5e7eb'
                              }
                            }, {
                              colors: ['#3b82f6'],
                              plotOptions: {
                                bar: {
                                  colors: {
                                    ranges: [{
                                      from: -45,
                                      to: 0,
                                      color: '#ffffff'
                                    }]
                                  }
                                }
                              },
                              grid: {
                                borderColor: '#404040'
                              }
                            });

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>

Tailwind CSS Advanced Range Slider

Requires Additional Installation

Requires JS

How to use

Install noUiSlider.

Add the noUiSLider JavaScript

Basic usage

Disabled

Steps

Tooltip

Range

Range with Tooltip

Pips

Pips auto values

Pass value to HTML element

Pass values to HTML elements (Range)

Formatting with thousands separators and decimal points

Pass value to input

Pass values to inputs

Range with Charts Example

Requires Additional Installation

On this page