Tailwind CSS Range Controls Blocks

All Blocks
Application UI
Forms
Range Controls

Range Controls

Range controls for price filters, smart device sliders, and interactive value adjustments with charts and icons.

Price Range Filter with Chart Pro

Dual-handle price slider overlays a chart with matching min and max inputs below.

<div id="hs-pro-pytfrrch" class="mx-3 --prevent-on-load-init" data-hs-range-slider='{
                        "start": [0, 1000],
                        "range": {
                          "min": 0,
                          "max": 1000
                        },
                        "connect": true,
                        "formatter": "integer",
                        "cssClasses": {
                          "target": "relative h-1 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-7 bg-layer border border-layer-line rounded-full shadow-lg 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-primary origin-top-left",
                          "touchArea": "absolute -top-1 -bottom-1 -inset-s-1 -inset-e-1"
                        }
                      }'>
                    </div>

<div class="mt-8 flex justify-between gap-3">
                      
                      <div class="text-center">
                        <label for="hs-pro-pytfrrch-vtit-min" class="block mb-1 text-sm text-muted-foreground-1">
                          Min
                        </label>
                        <input id="hs-pro-pytfrrch-vtit-min" type="number" class="py-2 sm:py-2.5 px-3 block w-16 text-center bg-layer border-layer-line rounded-xl sm:text-sm ring-1 ring-transparent text-foreground placeholder:text-muted-foreground-1 hover:border-primary-hover hover:ring-primary-hover focus:border-primary-hover focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="250" style="-moz-appearance: textfield;">
                      </div>

<div class="text-center">
                        <label for="hs-pro-pytfrrch-vtit-max" class="block mb-1 text-sm text-muted-foreground-1">
                          Max
                        </label>
                        <input id="hs-pro-pytfrrch-vtit-max" type="number" class="py-2 sm:py-2.5 px-3 block w-16 text-center bg-layer border-layer-line rounded-xl sm:text-sm ring-1 ring-transparent text-foreground placeholder:text-muted-foreground-1 hover:border-primary-hover hover:ring-primary-hover focus:border-primary-hover focus:ring-primary-focus [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:opacity-50 disabled:pointer-events-none" value="750" style="-moz-appearance: textfield;">
                      </div>
                      
                    </div>

html.classList.toggle("dark", resolvedAppearance === "dark");
                        html.setAttribute("data-theme", `theme-${colorTheme}`);
                        if (brand) html.setAttribute("data-brand", brand);
                        if (font) html.setAttribute("data-font", font);
                      })();
                    </script>

if (!data.type) return false;
                        if (data.type === "hs:color-theme-change") {
                          window.dispatchEvent(new CustomEvent("on-hs-color-theme-change", {
                            detail: {
                              target: document.documentElement,
                              value: data.value
                            }
                          }));
                        }
                      });
                    </script>

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-pro-pytfrrch');
                          const rangeInstance = new HSRangeSlider(range);
                          const min = document.querySelector('#hs-pro-pytfrrch-vtit-min');
                          const max = document.querySelector('#hs-pro-pytfrrch-vtit-max');
                          const background = document.querySelector('#hs-pro-pytfrrch-bg');
                          const foreground = document.querySelector('#hs-pro-pytfrrch-fg');
                          const foregroundParent = foreground.parentElement;

buildChart('#hs-pro-pytfrrch-bg', (mode) => ({
                            series: [{
                              name: 'Transactions',
                              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                            }],
                            chart: {
                              height: 50,
                              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-1')
                                  }]
                                }
                              }
                            },
                            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-1-inverse')
                                  }]
                                }
                              }
                            },
                            grid: {
                              borderColor: varToColor('--chart-colors-grid-border-inverse')
                            }
                          }));
                          buildChart('#hs-pro-pytfrrch-fg', (mode) => ({
                            series: [{
                              name: 'Transactions',
                              data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 18, 20, 35, 25, 25, 48, 40, 30, 30, 35, 45, 48, 48, 30, 40, 35, 25, 48, 48, 30, 40, 35, 25, 25, 8, 10, 15, 10]
                            }],
                            chart: {
                              height: 50,
                              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-1')
                                  }]
                                }
                              }
                            },
                            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-1-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-pro-pytfm', true);

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

Transparent Range Slider Row with Toggle Pro

Transparent control row combines an icon label, percentage slider, and trailing toggle switch.

<div class="hs-range-slider-wrapper relative flex flex-col sm:flex-row sm:items-center gap-2">
                      <div class="min-w-48 flex items-center gap-x-2.5">
                        <span class="flex shrink-0 justify-center items-center size-8.5 border border-line-inverse/20 rounded-lg">
                          <svg class="shrink-0 size-4 text-foreground-inverse" 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="M12 2v5"/><path d="M6 7h12l4 9H2l4-9Z"/><path d="M9.17 16a3 3 0 1 0 5.66 0"/></svg>
                        </span>

<div class="grow">
                          <p class="text-sm text-foreground-inverse">
                            Kitchen Lights 1
                          </p>
                          <p class="text-xs text-foreground-inverse/60">
                            <span class="hs-range-slider-current-value">100</span>%
                          </p>
                        </div>
                      </div>

<span class="peer-checked:hidden flex items-center justify-center bg-plain/10 border border-line-inverse/20 text-foreground-inverse size-9 rounded-full inset-shadow-sm shadow-sm">
                            <svg class="shrink-0 size-4.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.36 6.64A9 9 0 0 1 20.77 15"/><path d="M6.16 6.16a9 9 0 1 0 12.68 12.68"/><path d="M12 2v4"/><path d="m2 2 20 20"/></svg>
                          </span>

<span class="hidden peer-checked:flex justify-center items-center border border-line-inverse/20 text-foreground-inverse size-9 rounded-full peer-checked:bg-primary peer-checked:border-primary">
                            <svg class="shrink-0 size-4.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="M12 2v10"/><path d="M18.4 6.6a9 9 0 1 1-12.77.04"/></svg>
                          </span>
                        </label>
                      </div>
                    </div>

Centered Range Slider Carousel with Icon Handles Pro

Looping carousel cycles through centered range sliders with icon handles and arrow controls.

<div data-hs-carousel='{
                      "loadingClasses": "opacity-0",
                      "isInfiniteLoop": "true"
                    }' class="relative size-full">
                      <div class="hs-carousel relative overflow-hidden w-full h-52">
                        <div class="hs-carousel-body absolute top-0 bottom-0 inset-s-0 flex flex-nowrap transition-transform duration-700 opacity-0">
                          <div class="hs-carousel-slide">
                            
                            <div class="hs-range-slider-wrapper w-full text-center overflow-hidden">
                              <div class="mb-5 flex justify-center items-center">
                                <span class="flex shrink-0 justify-center items-center size-12 border border-line-inverse/20 rounded-full">
                                  <svg class="shrink-0 size-6 text-foreground-inverse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="m14 5-3 3 2 7 8-8-7-2Z"/><path d="m14 5-3 3-3-3 3-3 3 3Z"/><path d="M9.5 6.5 4 12l3 6"/><path d="M3 22v-2c0-1.1.9-2 2-2h4a2 2 0 0 1 2 2v2H3Z"/></svg>
                                </span>
                              </div>

<p class="text-sm text-foreground-inverse">
                                  Desk Lights 1
                                </p>
                              </div>

<div  class="" data-hs-range-slider='{
                                "start": 50,
                                "connect": "lower",
                                "range": {
                                  "min": 0,
                                  "max": 100
                                },
                                "formatter": "integer",
                                "cssClasses": {
                                  "target": "relative h-8 bg-plain/20 mx-4",
                                  "base": "size-full relative z-1 top-0 inset-e-0 before:absolute before:-inset-s-4 before:top-0 before:h-8 before:w-4 before:rounded-s-full before:bg-plain after:absolute after:-inset-e-4 after:top-0 after:h-8 after:w-4 after:rounded-e-full after:bg-plain/20",
                                  "origin": "absolute top-0 inset-e-0 size-full origin-top-left",
                                  "handle": "absolute top-1/2 inset-e-0 flex justify-center items-center size-8 bg-plain rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                  "connects": "relative z-0 size-full overflow-hidden",
                                  "connect": "absolute top-0 inset-e-0 z-1 size-full bg-plain origin-top-left",
                                  "touchArea": "absolute -inset-1"
                                },
                                "icons": {
                                  "handle": "<svg class=\"shrink-0 size-4 text-black\" 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=\"m9 7-5 5 5 5\"/><path d=\"m15 7 5 5-5 5\"/></svg>"
                                }
                              }'></div>
                              
                            </div>
                            
                          </div>

<p class="text-sm text-foreground-inverse">
                                  Desk Lights 2
                                </p>
                              </div>

<div  class="" data-hs-range-slider='{
                                "start": 25,
                                "connect": "lower",
                                "range": {
                                  "min": 0,
                                  "max": 100
                                },
                                "formatter": "integer",
                                "cssClasses": {
                                  "target": "relative h-8 bg-plain/20 mx-4",
                                  "base": "size-full relative z-1 top-0 inset-e-0 before:absolute before:-inset-s-4 before:top-0 before:h-8 before:w-4 before:rounded-s-full before:bg-plain after:absolute after:-inset-e-4 after:top-0 after:h-8 after:w-4 after:rounded-e-full after:bg-plain/20",
                                  "origin": "absolute top-0 inset-e-0 size-full origin-top-left",
                                  "handle": "absolute top-1/2 inset-e-0 flex justify-center items-center size-8 bg-plain rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                  "connects": "relative z-0 size-full overflow-hidden",
                                  "connect": "absolute top-0 inset-e-0 z-1 size-full bg-plain origin-top-left",
                                  "touchArea": "absolute -inset-1"
                                },
                                "icons": {
                                  "handle": "<svg class=\"shrink-0 size-4 text-black\" 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=\"m9 7-5 5 5 5\"/><path d=\"m15 7 5 5-5 5\"/></svg>"
                                }
                              }'></div>
                              
                            </div>
                            
                          </div>

<p class="text-sm text-foreground-inverse">
                                  Back Door Lights 1
                                </p>
                              </div>

<div  class="" data-hs-range-slider='{
                                "start": 100,
                                "connect": "lower",
                                "range": {
                                  "min": 0,
                                  "max": 100
                                },
                                "formatter": "integer",
                                "cssClasses": {
                                  "target": "relative h-8 bg-plain/20 mx-4",
                                  "base": "size-full relative z-1 top-0 inset-e-0 before:absolute before:-inset-s-4 before:top-0 before:h-8 before:w-4 before:rounded-s-full before:bg-plain after:absolute after:-inset-e-4 after:top-0 after:h-8 after:w-4 after:rounded-e-full after:bg-plain/20",
                                  "origin": "absolute top-0 inset-e-0 size-full origin-top-left",
                                  "handle": "absolute top-1/2 inset-e-0 flex justify-center items-center size-8 bg-plain rounded-full cursor-pointer translate-x-2/4 -translate-y-2/4",
                                  "connects": "relative z-0 size-full overflow-hidden",
                                  "connect": "absolute top-0 inset-e-0 z-1 size-full bg-plain origin-top-left",
                                  "touchArea": "absolute -inset-1"
                                },
                                "icons": {
                                  "handle": "<svg class=\"shrink-0 size-4 text-black\" 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=\"m9 7-5 5 5 5\"/><path d=\"m15 7 5 5-5 5\"/></svg>"
                                }
                              }'></div>
                              
                            </div>
                            
                          </div>
                        </div>
                      </div>

<button type="button" class="hs-carousel-prev hs-carousel-disabled:opacity-50 hs-carousel-disabled:cursor-default absolute top-1/2 inset-s-2 size-8 inline-flex shrink-0 justify-center items-center gap-x-2 border border-line-inverse/20 text-foreground-inverse rounded-full inset-shadow-sm shadow-sm hover:bg-plain/20 focus:outline-hidden focus:bg-plain/20 -translate-y-1/2">
                        <span class="text-2xl" aria-hidden="true">
                          <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="m15 18-6-6 6-6"></path></svg>
                        </span>
                        <span class="sr-only">Previous</span>
                      </button>