Components / Form & Input / Slider

Slider beta

A range with a filled track and the core in the thumb — the mark shows where your grip is.

Preview

Volume60

Brightness30

<div style="display:grid;gap:16px;max-width:400px">
  <div data-slider style="display:grid;gap:2px">
    <div style="display:flex;justify-content:space-between;font-size:12.5px"><label for="sl-vol" style="font-weight:550">Volume</label><span data-slider-val style="font-family:var(--k-mono);color:var(--k-ink-2)">60</span></div>
    <input class="k-slider" id="sl-vol" type="range" min="0" max="100" value="60">
  </div>
  <div data-slider style="display:grid;gap:2px">
    <div style="display:flex;justify-content:space-between;font-size:12.5px"><label for="sl-br" style="font-weight:550">Brightness</label><span data-slider-val style="font-family:var(--k-mono);color:var(--k-ink-2)">30</span></div>
    <input class="k-slider" id="sl-br" type="range" min="0" max="100" value="30">
  </div>
</div>

/* KATA Slider */
.k-slider{-webkit-appearance:none;appearance:none;width:100%;height:20px;background:transparent;cursor:pointer;--p:50%}
.k-slider::-webkit-slider-runnable-track{height:4px;border-radius:var(--k-radius-full);background:linear-gradient(90deg,var(--k-ink) var(--p),var(--k-track) var(--p))}
.k-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:radial-gradient(circle at center,var(--k-core) 0 2.5px,var(--k-knob) 3.2px);border:1.5px solid var(--k-border-strong);box-shadow:0 1px 2px rgba(16,24,40,.18)}
.k-slider::-moz-range-track{height:4px;border-radius:var(--k-radius-full);background:var(--k-track)}
.k-slider::-moz-range-progress{height:4px;border-radius:var(--k-radius-full);background:var(--k-ink)}
.k-slider::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at center,var(--k-core) 0 2.5px,var(--k-knob) 3.2px);border:1.5px solid var(--k-border-strong);box-shadow:0 1px 2px rgba(16,24,40,.18)}
.k-slider:focus-visible{outline:none}
.k-slider:focus-visible::-webkit-slider-thumb{box-shadow:var(--k-ring)}

// KATA Slider — keep the filled track and the readout in sync.
document.querySelectorAll('[data-slider]').forEach(function (root) {
  var input = root.querySelector('input[type="range"]');
  var out = root.querySelector('[data-slider-val]');
  if (!input) return;
  function sync() {
    var min = parseFloat(input.min || 0);
    var max = parseFloat(input.max || 100);
    var pct = ((parseFloat(input.value) - min) / (max - min)) * 100;
    input.style.setProperty('--p', pct + '%');
    if (out) out.textContent = input.value;
  }
  input.addEventListener('input', sync);
  sync();
});

Usage

For values that are felt, not typed: volume, brightness, opacity. Always pair with the numeric value; if the exact number matters, add an Input beside it.

Accessibility

A native range input: arrows, Page Up/Down and screen readers work as the platform defines. The visible value updates with it.

Select

Stepper