Range Slider · Panel

Basic

Initialize on a wrapper that contains one input[type="range"]. The component stores --mv-range-fill on the root (0–1) so you can drive a visual track or theme styles.

<div class="w-full max-w-md space-y-3" data-mv-range-slider="true">
  <input
    type="range"
    class="w-full accent-primary"
    min="0"
    max="100"
    value="40"
  />
</div>

With output

Point data-mv-range-slider-output at a selector for an element whose text updates on input and change (searched under the root first, then document).

Level25

<div class="w-full max-w-md space-y-3" data-mv-range-slider="true" data-mv-range-slider-output="#mv-range-slider-value">
  <div class="flex items-center justify-between gap-3 text-sm">
    <span class="text-muted-foreground">Level</span><span id="mv-range-slider-value" class="tabular-nums font-medium">25</span>
  </div>
  <input type="range" class="w-full accent-primary" min="0" max="100" value="25">
</div>

Disabled

Use the native disabled attribute on the range input. The control stays a real form field; avoid replacing it with a non-focusable custom thumb.

Native disabled — no pointer events; keyboard focus depends on the browser.

<div class="w-full max-w-md space-y-3 opacity-80" data-mv-range-slider="true">
  <input type="range" class="w-full accent-primary" min="0" max="100" disabled value="60">
  <p class="text-xs text-muted-foreground">
    Native <code class="text-foreground/80">disabled</code> — no pointer events;
    keyboard focus depends on the browser.
  </p>
</div>

Stepped bounds

Define explicit min, max, and step values to constrain user input to predictable increments.

Value35

Uses native bounds with min=10, max=90, and step=5.

<div class="w-full max-w-md space-y-3" data-mv-range-slider="true" data-mv-range-slider-output="#mv-range-slider-stepped-value">
  <div class="flex items-center justify-between gap-3 text-sm">
    <span class="text-muted-foreground">Value</span><span id="mv-range-slider-stepped-value" class="font-medium tabular-nums">35</span>
  </div>
  <input type="range" class="w-full accent-primary" min="10" max="90" step="5" value="35">
  <p class="text-xs text-muted-foreground">
    Uses native bounds with
    <code class="text-foreground/80">min=10</code>,<!-- -->
    <code class="text-foreground/80">max=90</code>, and<!-- -->
    <code class="text-foreground/80">step=5</code>.
  </p>
</div>

Datalist ticks

Use native list and to add browser-supported tick references for common values.

Value50

0255075100

Native tick marks via list + <datalist>.

<div class="w-full max-w-md space-y-3" data-mv-range-slider="true" data-mv-range-slider-output="#mv-range-slider-ticks-value">
  <div class="flex items-center justify-between gap-3 text-sm">
    <span class="text-muted-foreground">Value</span><span id="mv-range-slider-ticks-value" class="font-medium tabular-nums">50</span>
  </div>
  <div class="flex items-center justify-between gap-3 text-xs text-muted-foreground">
    <span>0</span><span>25</span><span>50</span><span>75</span><span>100</span>
  </div>
  <input type="range" class="w-full accent-primary" min="0" max="100" step="5" list="mv-range-slider-ticks" value="50"><datalist id="mv-range-slider-ticks">
    <option value="0"></option>
    <option value="25"></option>
    <option value="50"></option>
    <option value="75"></option>
    <option value="100"></option>
  </datalist>
  <p class="text-xs text-muted-foreground">
    Native tick marks via <code class="text-foreground/80">list</code> +<!-- -->
    <code class="text-foreground/80">&lt;datalist&gt;</code>.
  </p>
</div>

Form integration

Keep the range input in a standard form so submission and readout work with native semantics.

Submit to read native form data.

<div class="w-full max-w-md space-y-4">
  <form id="mv-range-slider-form" class="space-y-3">
    <div class="space-y-2" data-mv-range-slider="true" data-mv-range-slider-output="#mv-range-slider-form-output">
      <div class="flex items-center justify-between gap-3 text-sm">
        <label for="mv-range-slider-form-value" class="text-muted-foreground">Satisfaction</label><span id="mv-range-slider-form-output" class="font-medium tabular-nums">70</span>
      </div>
      <input id="mv-range-slider-form-value" type="range" class="w-full accent-primary" min="0" max="100" name="satisfaction" value="70">
    </div>
    <button type="submit" class="mv-btn mv-btn-sm mv-btn-primary">
      Submit
    </button>
  </form>
  <p id="mv-range-slider-form-readout" class="text-xs text-muted-foreground">
    Submit to read native form data.
  </p>
  <script>
    (function () {
      var form = document.getElementById("mv-range-slider-form");
      var readout = document.getElementById("mv-range-slider-form-readout");
      if (!form || !readout) return;

      form.addEventListener("submit", function (event) {
        event.preventDefault();
        var formData = new FormData(form);
        var value = formData.get("satisfaction");
        readout.textContent = "Submitted value: " + String(value ?? "");
      });
    })();
  </script>
</div>

Programmatic update

Use external controls to set preset values while keeping slider output in sync.

Progress50

<div class="w-full max-w-md space-y-3" data-mv-range-slider="true" data-mv-range-slider-output="#mv-range-slider-programmatic-value">
  <div class="flex items-center justify-between gap-3 text-sm">
    <span class="text-muted-foreground">Progress</span><span id="mv-range-slider-programmatic-value" class="font-medium tabular-nums">50</span>
  </div>
  <input id="mv-range-slider-programmatic-input" type="range" class="w-full accent-primary" min="0" max="100" value="50">
  <div class="flex flex-wrap gap-2">
    <button type="button" class="mv-btn mv-btn-sm mv-btn-outline" data-set-range="25">
      Set 25%</button><button type="button" class="mv-btn mv-btn-sm mv-btn-outline" data-set-range="50">
      Set 50%</button><button type="button" class="mv-btn mv-btn-sm mv-btn-outline" data-set-range="75">
      Set 75%
    </button>
  </div>
  <script>
    (function () {
      var input = document.getElementById("mv-range-slider-programmatic-input");
      if (!input) return;

      var buttons = document.querySelectorAll("[data-set-range]");
      buttons.forEach(function (button) {
        button.addEventListener("click", function () {
          var next = button.getAttribute("data-set-range");
          if (!next) return;
          input.value = next;
          input.dispatchEvent(new Event("input", { bubbles: true }));
          input.dispatchEvent(new Event("change", { bubbles: true }));
        });
      });
    })();
  </script>
</div>