.q2w-slider

Slider

Range control for opacity, thresholds, time windows, and interactive map filters.

Preview

Layer opacity

Zona Nilai Tanah overlay

75%

0%100%

Usage

<div class="q2w-slider q2w-slider--panel" style="--q2w-slider-value:75%;">
  <div class="q2w-slider__head">
    <div>
      <div class="q2w-slider__title">Layer opacity</div>
      <div class="q2w-slider__sub">Zona Nilai Tanah overlay</div>
    </div>
    <strong class="q2w-slider__live">75%</strong>
  </div>
  <input class="q2w-slider__input" type="range" min="0" max="100" value="75" aria-label="Layer opacity">
</div>

Variants

Pattern	Effect
`.q2w-slider`	Inline slider row for simple controls
`.q2w-slider--panel`	Panel/card presentation with title, value, and scale
`.q2w-slider__input`	Native range input styled with q2w tokens
`--q2w-slider-value`	Optional custom property for synced filled-track previews

← Quick Compare →