Range Group

A compact multi-range filter. One toggle summarises several numeric range filters inline (Age / Salary / Children) and expands into a floating panel with one slider per dimension — instead of spreading three separate sliders across a filter bar. Each row is dual-thumb (min–max) or single-thumb (a ≥ / ≤ threshold), configured per-row via data attributes.

In a filter bar

The range group drops into a .pa-filter-card__filters row as a single control standing in for three sliders. Open it, drag, and Apply.

Emitted values

The group dispatches pa-range-group:change live and pa-range-group:apply / :reset on the buttons. Payload is keyed by data-key; a bound at its extent reports null (i.e. “Any”).

// interact with the filter above…

Single-thumb thresholds

Set data-mode="single" for a one-handle threshold. data-bound="gte" reads as “value+”, data-bound="lte" as “≤ value”.

Handle shapes

Add a pa-range--handle-* modifier to any .pa-range row to restyle its handles. Purely cosmetic (no JS), so you can mix shapes per row. Open the filter to compare — circle (default), rect, bar, arrow, and needle (a downward triangle balancing its point on the track).

Ticks & click-to-seek

Add data-ticks (major interval) and optionally data-ticks-minor to draw tick marks along the track; add data-tick-labels to print the major values beneath. Marks sit behind the track so only their ends show — major ticks reach further out than minor. On every row (with or without ticks) the track is click-to-seek: press anywhere off the handles and the nearest thumb jumps there and keeps following the pointer. Add data-snap-ticks to make the thumbs settle on the nearest tick instead of the (possibly finer) data-step grid — drag the Level row and it snaps to 0, 10, 20…

<div class="pa-range" data-range data-key="age"
     data-min="0" data-max="80"
     data-ticks="20" data-ticks-minor="10" data-tick-labels>

Theming with --pa-range-* tokens

Every colour and key dimension is a runtime token that falls back to the shared cascade, so a theme or a per-instance style can retint/resize a slider with no recompile. This group overrides the fill, thumb, track thickness, and handle size — set on the __panel (it reparents to <body> when open, so tokens on the group root wouldn't reach the sliders).

<div class="pa-range-group__panel" data-range-group-panel
     style="--pa-range-fill: #8b5cf6;
            --pa-range-thumb-border: #8b5cf6;
            --pa-range-track-height: 0.8rem;
            --pa-range-thumb-size: 2rem;">

Markup

One [data-range] row per dimension. Positioning is driven in 0–100% via CSS custom properties on logical inset properties, so RTL mirrors automatically.

<div class="pa-range-group" data-range-group>
  <button class="pa-range-group__toggle" data-range-group-toggle aria-expanded="false">
    <!-- range-group.js fills this with "LABEL value / …" segments -->
    <span class="pa-range-group__summary" data-range-group-summary></span>
    <i class="fas fa-chevron-down pa-range-group__caret"></i>
  </button>

  <div class="pa-range-group__panel" data-range-group-panel>
    <div class="pa-range-group__row">
      <div class="pa-range-group__row-head">
        <span class="pa-range-group__row-label">Age</span>
        <span class="pa-range-group__row-value" data-range-output></span>
      </div>
      <div class="pa-range" data-range
           data-key="age" data-min="18" data-max="80"
           data-value-min="25" data-value-max="60">
        <div class="pa-range__rail">
          <div class="pa-range__track"></div>
          <div class="pa-range__fill" data-range-fill></div>
          <button class="pa-range__thumb pa-range__thumb--min" data-range-thumb="min"></button>
          <button class="pa-range__thumb pa-range__thumb--max" data-range-thumb="max"></button>
        </div>
      </div>
    </div>
    <!-- …more rows… -->
    <div class="pa-range-group__actions">
      <button class="pa-btn pa-btn--sm pa-btn--ghost" data-range-group-reset>Reset</button>
      <button class="pa-btn pa-btn--sm pa-btn--primary" data-range-group-apply>Apply</button>
    </div>
  </div>
</div>

CSS Classes Reference

Compact control

  • pa-range-group - Root wrapper (toggle + floating panel)
  • pa-range-group__toggle - The button summarising the filters
  • pa-range-group__summary - Single-line "LABEL value / …" readout host
  • pa-range-group__seg-label - A dimension's label in the summary
  • pa-range-group__seg-value - A dimension's value in the summary
  • pa-range-group__seg-value--empty - Muted "Any" value
  • pa-range-group__seg-sep - The " / " separator
  • pa-range-group__caret - Dropdown chevron (rotates when open)
  • pa-range-group--open - State: panel open (on the root)

Floating panel

  • pa-range-group__panel - The floating panel (reparented to body when open)
  • pa-range-group__panel--open - State: shown
  • pa-range-group__row - One dimension (head + slider)
  • pa-range-group__row-head - Row label + value line
  • pa-range-group__row-label - Row label
  • pa-range-group__row-value - Row value readout
  • pa-range-group__row-value--empty - Muted "Any" readout
  • pa-range-group__actions - Reset / Apply footer

Slider primitive

  • pa-range - Slider (dual-thumb by default)
  • pa-range__rail - Inner rail the thumbs travel along
  • pa-range__track - Full track
  • pa-range__fill - Selected-range fill
  • pa-range__thumb - A handle
  • pa-range__thumb--min / --max - Low / high handle
  • pa-range--single - Single-thumb (threshold) mode
  • pa-range--disabled - Non-interactive state

Handle shapes

  • pa-range--handle-rect - Rounded rectangle handles
  • pa-range--handle-bar - Thin vertical bar handles
  • pa-range--handle-arrow - Chevron handles
  • pa-range--handle-needle - Downward-triangle "needle" handles

Tick marks

  • pa-range__ticks - Tick container (built by JS from data-ticks)
  • pa-range__tick - A minor tick mark
  • pa-range__tick--major - A major tick mark (longer)
  • pa-range__tick-labels - Container for the value labels
  • pa-range__tick-label - A single major-tick label
  • pa-range--ticks-labeled - Row modifier reserving the label band

Data attributes

  • data-range-group - Marks a root for auto-init
  • data-range-group-toggle / -panel / -summary - Wiring hooks
  • data-range-group-reset / -apply - Footer buttons
  • data-range - A slider row; data-key / data-label identify it
  • data-min / data-max / data-step - Bounds
  • data-mode="single" + data-bound="gte|lte" - Threshold mode
  • data-value / data-value-min / data-value-max - Initial values
  • data-prefix / data-suffix / data-thousands - Number formatting
  • data-ticks / data-ticks-minor / data-tick-labels - Tick marks & labels
  • data-snap-ticks - Snap thumbs to the nearest tick (not the step grid)
  • data-range-thumb="min|max" / data-range-fill / data-range-output - Element hooks

Theming tokens (CSS variables)

  • --pa-range-track / -fill - Track / fill colour
  • --pa-range-thumb-bg / -thumb-border / -thumb-border-hover - Handle colours
  • --pa-range-focus-ring - Thumb focus / active ring
  • --pa-range-tick / -tick-major - Minor / major tick colour
  • --pa-range-track-height / -thumb-size - Structural sizes
  • --pa-range-group-panel-min-width - Floating panel width
Type / for commands, : to search a category, or just start typing
↑↓ Navigate
↵ Select
Esc Close

Settings

Body text size. All elements scale proportionally.
👤

John Doe

Administrator
  • 📊 Dashboard
  • 📝 Forms
  • 📋 Tables
  • 📊 Data Grid