Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Dual range slider

Two thumbs for a minimum and a maximum over two native range inputs, which keep the values for the form. Steps, a minimum gap, formatted tooltips and the WAI-ARIA slider keys. Needs monsoon.js.

Interactive6 classesNeeds monsoon.jsLight and dark

Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.

Example

Full

JavaScript API

Attribute

data-m-range-dual

Options

OptionDescription
data-m-range-dual-format="currency:USD" (or percent, unit:kilometer)
data-m-range-dual-gap="50"
data-m-range-dual-tooltips="always"
min, max and step on the inputs

Methods

MethodDescription
Monsoon.rangeDual(el).value
Monsoon.rangeDual(el).value = [100, 400]

Events

EventDescription
monsoon:change { min, max }
input and change on the native inputs

Classes

6 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the dual range slider. On a <div> in the example. Sets grid display, gap, block display, height, margin and pointer cursor, and --tone, --tone-fg and --_thumb.
CSS
.range-dual:has(> .range-dual-thumb) {
  display: block;
  height: var(--_thumb);
  margin-block: .375rem;
  touch-action: none;
  cursor: pointer;
}

.range-dual {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --_thumb: calc(var(--choice-size, 1.125rem) + .125rem);
  position: relative;
  display: grid;
  gap: .5rem;
}
Modifier Modifier, combined with the range-dual class. Not used in the example above. Sets absolute position, offsets, height, transform, background and corner radius.
CSS
.range-dual-track {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: calc(var(--_thumb) * .3);
  translate: 0 -50%;
  background-color: color-mix(in oklab, var(--foreground) 13%, var(--surface));
  border-radius: var(--m-radius-full);
}
Modifier Modifier, combined with the range-dual class. Not used in the example above. Sets absolute position, offsets, width, background, corner radius and text color.
CSS
@media (forced-colors: active) {
  .datepicker-grid td[aria-selected=true] .datepicker-day,
  .range-dual-fill,
  .tree-check::before {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }
}

.range-dual-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--range-start, 0) * 1%);
  width: calc((var(--range-end, 100) - var(--range-start, 0)) * 1%);
  background-color: var(--tone);
  border-radius: inherit;
}
Modifier Modifier, combined with the range-dual class. Not used in the example above. Sets absolute position, offsets, stacking order, width, height and margin.
CSS
.range-dual-thumb:hover {
  scale: 1.1;
}

.range-dual-thumb[data-active] {
  z-index: 2;
  scale: 1.15;
  cursor: grabbing;
}
Modifier Modifier, combined with the range-dual class. Not used in the example above. Sets absolute position, offsets, padding, text size, font weight and text style.
CSS
@media (prefers-reduced-motion: reduce) {
  .sortable-item,
  .sortable-ghost,
  .range-dual-thumb,
  .range-dual-tooltip,
  .tree-toggle,
  .tree-check::before,
  .toast-stack > .toast-item,
  .color-picker-swatch,
  .rating-input-star,
  .datepicker-toggle::before,
  .combobox-toggle::before {
    transition: none;
  }
}

.range-dual-tooltip {
  position: absolute;
  bottom: calc(100% + .5rem);
  left: 50%;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--background);
  background-color: var(--foreground);
  border-radius: var(--m-radius-md);
  box-shadow: var(--m-shadow-md);
  opacity: 0;
  translate: -50% .25rem;
  pointer-events: none;
  transition: opacity var(--m-duration-fast), translate var(--m-duration-fast);
}
Part Part of the dual range slider. On an <input> in the example. Sets border, not-allowed cursor, opacity, block display, width and height, and 8 custom properties.
CSS
.range:focus-visible {
  outline: 0;
}

.range::-webkit-slider-runnable-track {
  height: var(--_h);
  background: transparent;
}

Usage

The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Dual range slider: start from the base class, then add modifiers -->
<div class="grid gap-10 max-w-sm pt-8">
  <div class="range-dual" data-m-range-dual data-m-range-dual-format="currency:USD" data-m-range-dual-gap="50">
    <input type="range" class="range" name="min-price" min="0" max="1000" step="10" value="180" aria-label="Minimum price">
    <input type="range" class="range" name="max-price" min="0" max="1000" step="10" value="720" aria-label="Maximum price">
  </div>
  <div class="range-dual" data-m-range-dual data-m-range-dual-format="percent" data-m-range-dual-tooltips="always">
    <input type="range" class="range" min="0" max="100" value="25" aria-label="Lower bound">
    <input type="range" class="range" min="0" max="100" value="60" aria-label="Upper bound">
  </div>
</div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
InteractiveDate range pickerTwo date inputs in one .datepicker pick a range: the first click sets the start, the second the end, with the days between highlighted and presets such as Last 7 days. Needs monsoon.js.FormsRangeSlider with a custom track and thumb in every engine, a filled track and tones.InteractiveSortable listReorder with a pointer or the keyboard: Space picks an item up, the arrows move it, Space drops it and Escape puts it back. Siblings slide out of the way and the list scrolls near its edges. Needs monsoon.js.InteractiveKanban boardSortable lists that share a group become kanban columns: drag cards between them, or pick one up with Space and move it to the next column with the left and right arrows. Column counts update on drop. Needs monsoon.js.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.