Vertical Range Sliders in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<div><span class="lbl">Five-band equaliser</span><div class="card">
<div class="vt-bank">
  <div class="vt eq"><output for="vt-eq1">+4 dB</output><input type="range" id="vt-eq1" min="-12" max="12" value="4" data-signed data-suffix=" dB"><label for="vt-eq1">60 Hz</label></div>
  <div class="vt eq"><output for="vt-eq2">+2 dB</output><input type="range" id="vt-eq2" min="-12" max="12" value="2" data-signed data-suffix=" dB"><label for="vt-eq2">230 Hz</label></div>
  <div class="vt eq"><output for="vt-eq3">−3 dB</output><input type="range" id="vt-eq3" min="-12" max="12" value="-3" data-signed data-suffix=" dB"><label for="vt-eq3">910 Hz</label></div>
  <div class="vt eq"><output for="vt-eq4">+1 dB</output><input type="range" id="vt-eq4" min="-12" max="12" value="1" data-signed data-suffix=" dB"><label for="vt-eq4">3.6 kHz</label></div>
  <div class="vt eq"><output for="vt-eq5">+6 dB</output><input type="range" id="vt-eq5" min="-12" max="12" value="6" data-signed data-suffix=" dB"><label for="vt-eq5">14 kHz</label></div>
</div></div></div>

<div><span class="lbl">Mixer faders</span><div class="card">
<div class="vt-bank">
  <div class="vt fader"><output for="vt-vox">−6 dB</output><input type="range" id="vt-vox" min="-40" max="6" value="-6" data-signed data-suffix=" dB"><label for="vt-vox">Vocals</label></div>
  <div class="vt fader"><output for="vt-gtr">−12 dB</output><input type="range" id="vt-gtr" min="-40" max="6" value="-12" data-signed data-suffix=" dB"><label for="vt-gtr">Guitar</label></div>
  <div class="vt fader"><output for="vt-drm">−3 dB</output><input type="range" id="vt-drm" min="-40" max="6" value="-3" data-signed data-suffix=" dB"><label for="vt-drm">Drums</label></div>
  <div class="vt fader"><output for="vt-bus">0 dB</output><input type="range" id="vt-bus" min="-40" max="6" value="0" data-signed data-suffix=" dB"><label for="vt-bus">Master</label></div>
</div></div></div>

<div><span class="lbl">Tall pills</span><div class="card">
<div class="vt-bank">
  <div class="vt pill"><output for="vt-vol">64%</output>
    <div class="vt-pill"><input type="range" id="vt-vol" min="0" max="100" value="64" data-suffix="%">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M18.5 5.5a9 9 0 0 1 0 13"/></svg></div>
    <label for="vt-vol">Volume</label></div>
  <div class="vt pill"><output for="vt-lamp">45%</output>
    <div class="vt-pill"><input type="range" id="vt-lamp" min="0" max="100" value="45" data-suffix="%">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg></div>
    <label for="vt-lamp">Desk lamp</label></div>
</div></div></div>

CSS

/* Vertical range sliders: writing-mode:vertical-lr turns a real <input type="range"> upright and direction:rtl
   puts the minimum at the bottom. Arrow keys, Page Up/Down, Home and End work as on any range input.
   --p (0 to 1) is set by the script below. --vt-along is the thumb size along the track, --vt-cross across it. */
.vt{--vt-accent:#c2410c;--vt-track:#8a8178;--vt-along:20px;--vt-cross:20px;--vt-w:6px;--vt-len:170px;--p:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0}
.vt output{font-size:.85rem;font-weight:700;color:var(--vt-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.vt label{font-size:.8rem;font-weight:600;color:#44403c;white-space:nowrap}
.vt input[type="range"]{-webkit-appearance:none;appearance:none;writing-mode:vertical-lr;direction:rtl;
  width:var(--vt-cross);height:var(--vt-len);margin:0;background:none;cursor:pointer}
.vt input[type="range"]:focus-visible{outline:none}
.vt input[type="range"]::-webkit-slider-runnable-track{width:var(--vt-w);border-radius:999px;
  background:linear-gradient(to top,var(--vt-accent) 0 calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p)),var(--vt-track) 0)}
.vt input[type="range"]::-moz-range-track{width:var(--vt-w);border-radius:999px;
  background:linear-gradient(to top,var(--vt-accent) 0 calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p)),var(--vt-track) 0)}
.vt input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;
  width:var(--vt-cross);height:var(--vt-along);margin-left:calc((var(--vt-w) - var(--vt-cross)) / 2);
  border:2px solid var(--vt-accent);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(28,25,23,.3)}
.vt input[type="range"]::-moz-range-thumb{box-sizing:border-box;width:var(--vt-cross);height:var(--vt-along);
  border:2px solid var(--vt-accent);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(28,25,23,.3)}
.vt input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--vt-accent)}
.vt input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--vt-accent)}
.vt-bank{display:flex;justify-content:space-around;gap:6px}
/* equaliser: the fill grows from the 0 dB centre towards the thumb; a short line marks 0 dB */
.vt.eq input[type="range"]{background:linear-gradient(#8a8178,#8a8178) center / 100% 2px no-repeat}
.vt.eq input[type="range"]::-webkit-slider-runnable-track{background:linear-gradient(to top,var(--vt-track) 0 min(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),
  var(--vt-accent) 0 max(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),var(--vt-track) 0)}
.vt.eq input[type="range"]::-moz-range-track{background:linear-gradient(to top,var(--vt-track) 0 min(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),
  var(--vt-accent) 0 max(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),var(--vt-track) 0)}
/* mixer fader: a slim dark slot, a flat cap with a grip line, and dB ticks behind */
.vt.fader{--vt-along:16px;--vt-cross:34px;--vt-w:4px;--vt-len:190px;--vt-track:#57534e}
.vt.fader output{color:#1c1917}
.vt.fader input[type="range"]{background:linear-gradient(to top,#a8a29e 0 1px,transparent 0) 0 7.5px / 100% calc((100% - 16px) / 8) repeat-y}
.vt.fader input[type="range"]::-webkit-slider-runnable-track{background:var(--vt-track)}
.vt.fader input[type="range"]::-moz-range-track{background:var(--vt-track)}
.vt.fader input[type="range"]::-webkit-slider-thumb{border:1px solid #57534e;border-radius:4px;
  background:linear-gradient(#1c1917,#1c1917) center / 100% 2px no-repeat,linear-gradient(#fafaf9,#d6d3d1);box-shadow:0 2px 4px rgba(28,25,23,.35)}
.vt.fader input[type="range"]::-moz-range-thumb{border:1px solid #57534e;border-radius:4px;
  background:linear-gradient(#1c1917,#1c1917) center / 100% 2px no-repeat,linear-gradient(#fafaf9,#d6d3d1);box-shadow:0 2px 4px rgba(28,25,23,.35)}
/* tall pill: the whole track is the control, icon at the foot, value at the head */
.vt.pill{--vt-along:12px;--vt-cross:64px;--vt-w:64px;--vt-len:180px;--vt-track:#e7e2da}
.vt-pill{position:relative}
.vt.pill input[type="range"]{border-radius:22px}
.vt.pill input[type="range"]::-webkit-slider-runnable-track{border-radius:22px;box-shadow:inset 0 0 0 1px #8a8178}
.vt.pill input[type="range"]::-moz-range-track{border-radius:22px;box-shadow:inset 0 0 0 1px #8a8178}
.vt.pill input[type="range"]::-webkit-slider-thumb{margin-left:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(#fff,#fff) center / 24px 4px no-repeat}
.vt.pill input[type="range"]::-moz-range-thumb{border:0;border-radius:0;box-shadow:none;background:linear-gradient(#fff,#fff) center / 24px 4px no-repeat}
.vt.pill input[type="range"]:focus-visible{outline:2px solid var(--vt-accent);outline-offset:3px}
.vt.pill input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:none}
.vt.pill input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:none}
.vt-pill svg{position:absolute;left:50%;bottom:16px;width:24px;height:24px;transform:translateX(-50%);color:#fff;pointer-events:none}
.vt.pill label{font-size:.9rem;color:#1c1917}
.vt.pill output{color:#1c1917;font-size:.95rem}

JavaScript

// Keeps each slider's filled track (--p) and its <output> in step with the value.
document.querySelectorAll('.vt input[type="range"]').forEach(function (range) {
  var field = range.closest('.vt');
  var out = field.querySelector('output');
  function sync() {
    var v = Number(range.value);
    var sign = range.hasAttribute('data-signed') ? (v > 0 ? '+' : v < 0 ? '−' : '') : (v < 0 ? '−' : '');
    var text = sign + Math.abs(v).toLocaleString('en-US') + (range.dataset.suffix || '');
    field.style.setProperty('--p', (v - range.min) / (range.max - range.min));
    if (out) out.textContent = text;
    range.setAttribute('aria-valuetext', text);
  }
  range.addEventListener('input', sync);
  sync();
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<div><span class="lbl">Five-band equaliser</span><div class="card demo-card"><div class="card-body">
<div class="d-flex justify-content-around gap-2">
  <div class="d-flex flex-column align-items-center vt eq"><output class="fw-bold" for="vt-eq1">+4 dB</output><input type="range" class="form-range" id="vt-eq1" min="-12" max="12" value="4" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-eq1">60 Hz</label></div>
  <div class="d-flex flex-column align-items-center vt eq"><output class="fw-bold" for="vt-eq2">+2 dB</output><input type="range" class="form-range" id="vt-eq2" min="-12" max="12" value="2" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-eq2">230 Hz</label></div>
  <div class="d-flex flex-column align-items-center vt eq"><output class="fw-bold" for="vt-eq3">−3 dB</output><input type="range" class="form-range" id="vt-eq3" min="-12" max="12" value="-3" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-eq3">910 Hz</label></div>
  <div class="d-flex flex-column align-items-center vt eq"><output class="fw-bold" for="vt-eq4">+1 dB</output><input type="range" class="form-range" id="vt-eq4" min="-12" max="12" value="1" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-eq4">3.6 kHz</label></div>
  <div class="d-flex flex-column align-items-center vt eq"><output class="fw-bold" for="vt-eq5">+6 dB</output><input type="range" class="form-range" id="vt-eq5" min="-12" max="12" value="6" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-eq5">14 kHz</label></div>
</div></div></div></div>

<div><span class="lbl">Mixer faders</span><div class="card demo-card"><div class="card-body">
<div class="d-flex justify-content-around gap-2">
  <div class="d-flex flex-column align-items-center vt fader"><output class="fw-bold" for="vt-vox">−6 dB</output><input type="range" class="form-range" id="vt-vox" min="-40" max="6" value="-6" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-vox">Vocals</label></div>
  <div class="d-flex flex-column align-items-center vt fader"><output class="fw-bold" for="vt-gtr">−12 dB</output><input type="range" class="form-range" id="vt-gtr" min="-40" max="6" value="-12" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-gtr">Guitar</label></div>
  <div class="d-flex flex-column align-items-center vt fader"><output class="fw-bold" for="vt-drm">−3 dB</output><input type="range" class="form-range" id="vt-drm" min="-40" max="6" value="-3" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-drm">Drums</label></div>
  <div class="d-flex flex-column align-items-center vt fader"><output class="fw-bold" for="vt-bus">0 dB</output><input type="range" class="form-range" id="vt-bus" min="-40" max="6" value="0" data-signed data-suffix=" dB"><label class="form-label fw-semibold mb-0" for="vt-bus">Master</label></div>
</div></div></div></div>

<div><span class="lbl">Tall pills</span><div class="card demo-card"><div class="card-body">
<div class="d-flex justify-content-around gap-2">
  <div class="d-flex flex-column align-items-center vt pill"><output class="fw-bold" for="vt-vol">64%</output>
    <div class="vt-pill"><input type="range" class="form-range" id="vt-vol" min="0" max="100" value="64" data-suffix="%">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M18.5 5.5a9 9 0 0 1 0 13"/></svg></div>
    <label class="form-label fw-semibold mb-0" for="vt-vol">Volume</label></div>
  <div class="d-flex flex-column align-items-center vt pill"><output class="fw-bold" for="vt-lamp">45%</output>
    <div class="vt-pill"><input type="range" class="form-range" id="vt-lamp" min="0" max="100" value="45" data-suffix="%">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg></div>
    <label class="form-label fw-semibold mb-0" for="vt-lamp">Desk lamp</label></div>
</div></div></div></div>

CSS

/* Vertical range sliders: writing-mode:vertical-lr turns a Bootstrap .form-range upright and direction:rtl
   puts the minimum at the bottom. Arrow keys, Page Up/Down, Home and End work as on any range input.
   --p (0 to 1) is set by the script below. --vt-along is the thumb size along the track, --vt-cross across it. */
.vt{--vt-accent:#c2410c;--vt-track:#8a8178;--vt-along:20px;--vt-cross:20px;--vt-w:6px;--vt-len:170px;--p:0;
  gap:10px;min-width:0}
.vt output{font-size:.85rem;color:var(--vt-accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.vt .form-label{font-size:.8rem;color:#44403c;white-space:nowrap}
.vt .form-range{writing-mode:vertical-lr;direction:rtl;width:var(--vt-cross);height:var(--vt-len)}
.vt .form-range::-webkit-slider-runnable-track{width:var(--vt-w);height:100%;border-radius:999px;
  background:linear-gradient(to top,var(--vt-accent) 0 calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p)),var(--vt-track) 0)}
.vt .form-range::-moz-range-track{width:var(--vt-w);height:100%;border-radius:999px;
  background:linear-gradient(to top,var(--vt-accent) 0 calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p)),var(--vt-track) 0)}
.vt .form-range::-webkit-slider-thumb{box-sizing:border-box;
  width:var(--vt-cross);height:var(--vt-along);margin-left:calc((var(--vt-w) - var(--vt-cross)) / 2);
  border:2px solid var(--vt-accent);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(28,25,23,.3)}
.vt .form-range::-moz-range-thumb{box-sizing:border-box;width:var(--vt-cross);height:var(--vt-along);
  border:2px solid var(--vt-accent);border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(28,25,23,.3)}
.vt .form-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--vt-accent)}
.vt .form-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--vt-accent)}
/* equaliser: the fill grows from the 0 dB centre towards the thumb; a short line marks 0 dB */
.vt.eq .form-range{background:linear-gradient(#8a8178,#8a8178) center / 100% 2px no-repeat}
.vt.eq .form-range::-webkit-slider-runnable-track{background:linear-gradient(to top,var(--vt-track) 0 min(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),
  var(--vt-accent) 0 max(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),var(--vt-track) 0)}
.vt.eq .form-range::-moz-range-track{background:linear-gradient(to top,var(--vt-track) 0 min(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),
  var(--vt-accent) 0 max(50%,calc(var(--vt-along) / 2 + (100% - var(--vt-along)) * var(--p))),var(--vt-track) 0)}
/* mixer fader: a slim dark slot, a flat cap with a grip line, and dB ticks behind */
.vt.fader{--vt-along:16px;--vt-cross:34px;--vt-w:4px;--vt-len:190px;--vt-track:#57534e}
.vt.fader output{color:#1c1917}
.vt.fader .form-range{background:linear-gradient(to top,#a8a29e 0 1px,transparent 0) 0 7.5px / 100% calc((100% - 16px) / 8) repeat-y}
.vt.fader .form-range::-webkit-slider-runnable-track{background:var(--vt-track)}
.vt.fader .form-range::-moz-range-track{background:var(--vt-track)}
.vt.fader .form-range::-webkit-slider-thumb{border:1px solid #57534e;border-radius:4px;
  background:linear-gradient(#1c1917,#1c1917) center / 100% 2px no-repeat,linear-gradient(#fafaf9,#d6d3d1);box-shadow:0 2px 4px rgba(28,25,23,.35)}
.vt.fader .form-range::-moz-range-thumb{border:1px solid #57534e;border-radius:4px;
  background:linear-gradient(#1c1917,#1c1917) center / 100% 2px no-repeat,linear-gradient(#fafaf9,#d6d3d1);box-shadow:0 2px 4px rgba(28,25,23,.35)}
/* tall pill: the whole track is the control, icon at the foot, value at the head */
.vt.pill{--vt-along:12px;--vt-cross:64px;--vt-w:64px;--vt-len:180px;--vt-track:#e7e2da}
.vt-pill{position:relative}
.vt.pill .form-range{border-radius:22px}
.vt.pill .form-range::-webkit-slider-runnable-track{border-radius:22px;box-shadow:inset 0 0 0 1px #8a8178}
.vt.pill .form-range::-moz-range-track{border-radius:22px;box-shadow:inset 0 0 0 1px #8a8178}
.vt.pill .form-range::-webkit-slider-thumb{margin-left:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(#fff,#fff) center / 24px 4px no-repeat}
.vt.pill .form-range::-moz-range-thumb{border:0;border-radius:0;box-shadow:none;background:linear-gradient(#fff,#fff) center / 24px 4px no-repeat}
.vt.pill .form-range:focus-visible{outline:2px solid var(--vt-accent);outline-offset:3px}
.vt.pill .form-range:focus-visible::-webkit-slider-thumb{box-shadow:none}
.vt.pill .form-range:focus-visible::-moz-range-thumb{box-shadow:none}
.vt-pill svg{position:absolute;left:50%;bottom:16px;width:24px;height:24px;transform:translateX(-50%);color:#fff;pointer-events:none}
.vt.pill .form-label{font-size:.9rem;color:#1c1917}
.vt.pill output{color:#1c1917;font-size:.95rem}

JavaScript

// Keeps each slider's filled track (--p) and its <output> in step with the value.
document.querySelectorAll('.vt .form-range').forEach(function (range) {
  var field = range.closest('.vt');
  var out = field.querySelector('output');
  function sync() {
    var v = Number(range.value);
    var sign = range.hasAttribute('data-signed') ? (v > 0 ? '+' : v < 0 ? '−' : '') : (v < 0 ? '−' : '');
    var text = sign + Math.abs(v).toLocaleString('en-US') + (range.dataset.suffix || '');
    field.style.setProperty('--p', (v - range.min) / (range.max - range.min));
    if (out) out.textContent = text;
    range.setAttribute('aria-valuetext', text);
  }
  range.addEventListener('input', sync);
  sync();
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5c5650] uppercase">Five-band equaliser</span><div class="rounded-2xl border border-[#e7e2da] bg-white px-5 pt-[22px] pb-5 shadow-[0_1px_2px_rgba(28,25,23,.04)]">
<div class="flex justify-around gap-1.5">
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-eq1" class="text-[.85rem] font-bold whitespace-nowrap text-vt-accent tabular-nums">+4 dB</output><input type="range" id="vt-eq1" min="-12" max="12" value="4" data-signed data-suffix=" dB" class="m-0 h-[170px] w-[20px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(#8a8178,#8a8178)_center/100%_2px_no-repeat] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[7px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-vt-accent [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-vt-accent [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-eq1" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">60 Hz</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-eq2" class="text-[.85rem] font-bold whitespace-nowrap text-vt-accent tabular-nums">+2 dB</output><input type="range" id="vt-eq2" min="-12" max="12" value="2" data-signed data-suffix=" dB" class="m-0 h-[170px] w-[20px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(#8a8178,#8a8178)_center/100%_2px_no-repeat] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[7px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-vt-accent [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-vt-accent [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-eq2" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">230 Hz</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-eq3" class="text-[.85rem] font-bold whitespace-nowrap text-vt-accent tabular-nums">−3 dB</output><input type="range" id="vt-eq3" min="-12" max="12" value="-3" data-signed data-suffix=" dB" class="m-0 h-[170px] w-[20px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(#8a8178,#8a8178)_center/100%_2px_no-repeat] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[7px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-vt-accent [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-vt-accent [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-eq3" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">910 Hz</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-eq4" class="text-[.85rem] font-bold whitespace-nowrap text-vt-accent tabular-nums">+1 dB</output><input type="range" id="vt-eq4" min="-12" max="12" value="1" data-signed data-suffix=" dB" class="m-0 h-[170px] w-[20px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(#8a8178,#8a8178)_center/100%_2px_no-repeat] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[7px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-vt-accent [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-vt-accent [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-eq4" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">3.6 kHz</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-eq5" class="text-[.85rem] font-bold whitespace-nowrap text-vt-accent tabular-nums">+6 dB</output><input type="range" id="vt-eq5" min="-12" max="12" value="6" data-signed data-suffix=" dB" class="m-0 h-[170px] w-[20px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(#8a8178,#8a8178)_center/100%_2px_no-repeat] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[linear-gradient(to_top,var(--color-vt-track)_0_min(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-accent)_0_max(50%,calc(10px_+_(100%_-_20px)_*_var(--p))),var(--color-vt-track)_0)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[7px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-vt-accent [&::-webkit-slider-thumb]:bg-white [&::-webkit-slider-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-vt-accent [&::-moz-range-thumb]:bg-white [&::-moz-range-thumb]:shadow-[0_1px_3px_rgba(28,25,23,.3)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-eq5" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">14 kHz</label></div>
</div></div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5c5650] uppercase">Mixer faders</span><div class="rounded-2xl border border-[#e7e2da] bg-white px-5 pt-[22px] pb-5 shadow-[0_1px_2px_rgba(28,25,23,.04)]">
<div class="flex justify-around gap-1.5">
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-vox" class="text-[.85rem] font-bold whitespace-nowrap text-[#1c1917] tabular-nums">−6 dB</output><input type="range" id="vt-vox" min="-40" max="6" value="-6" data-signed data-suffix=" dB" class="m-0 h-[190px] w-[34px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(to_top,#a8a29e_0_1px,transparent_0)_0_7.5px/100%_calc((100%_-_16px)/8)_repeat-y] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[#57534e] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[#57534e] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[15px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-[34px] [&::-webkit-slider-thumb]:rounded-[4px] [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-[#57534e] [&::-webkit-slider-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-webkit-slider-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-[34px] [&::-moz-range-thumb]:rounded-[4px] [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-[#57534e] [&::-moz-range-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-moz-range-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-vox" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">Vocals</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-gtr" class="text-[.85rem] font-bold whitespace-nowrap text-[#1c1917] tabular-nums">−12 dB</output><input type="range" id="vt-gtr" min="-40" max="6" value="-12" data-signed data-suffix=" dB" class="m-0 h-[190px] w-[34px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(to_top,#a8a29e_0_1px,transparent_0)_0_7.5px/100%_calc((100%_-_16px)/8)_repeat-y] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[#57534e] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[#57534e] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[15px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-[34px] [&::-webkit-slider-thumb]:rounded-[4px] [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-[#57534e] [&::-webkit-slider-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-webkit-slider-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-[34px] [&::-moz-range-thumb]:rounded-[4px] [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-[#57534e] [&::-moz-range-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-moz-range-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-gtr" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">Guitar</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-drm" class="text-[.85rem] font-bold whitespace-nowrap text-[#1c1917] tabular-nums">−3 dB</output><input type="range" id="vt-drm" min="-40" max="6" value="-3" data-signed data-suffix=" dB" class="m-0 h-[190px] w-[34px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(to_top,#a8a29e_0_1px,transparent_0)_0_7.5px/100%_calc((100%_-_16px)/8)_repeat-y] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[#57534e] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[#57534e] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[15px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-[34px] [&::-webkit-slider-thumb]:rounded-[4px] [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-[#57534e] [&::-webkit-slider-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-webkit-slider-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-[34px] [&::-moz-range-thumb]:rounded-[4px] [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-[#57534e] [&::-moz-range-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-moz-range-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-drm" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">Drums</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-bus" class="text-[.85rem] font-bold whitespace-nowrap text-[#1c1917] tabular-nums">0 dB</output><input type="range" id="vt-bus" min="-40" max="6" value="0" data-signed data-suffix=" dB" class="m-0 h-[190px] w-[34px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] focus-visible:outline-none [background:linear-gradient(to_top,#a8a29e_0_1px,transparent_0)_0_7.5px/100%_calc((100%_-_16px)/8)_repeat-y] [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-1 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-[#57534e] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-1 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-[#57534e] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:-ml-[15px] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-[34px] [&::-webkit-slider-thumb]:rounded-[4px] [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-[#57534e] [&::-webkit-slider-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-webkit-slider-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-[34px] [&::-moz-range-thumb]:rounded-[4px] [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-[#57534e] [&::-moz-range-thumb]:[background:linear-gradient(#1c1917,#1c1917)_center/100%_2px_no-repeat,linear-gradient(#fafaf9,#d6d3d1)] [&::-moz-range-thumb]:shadow-[0_2px_4px_rgba(28,25,23,.35)] focus-visible:[&::-webkit-slider-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)] focus-visible:[&::-moz-range-thumb]:shadow-[0_0_0_3px_#fff,0_0_0_5px_var(--color-vt-accent)]"><label for="vt-bus" class="text-[.8rem] font-semibold whitespace-nowrap text-[#44403c]">Master</label></div>
</div></div></div>

<div><span class="mb-3 block text-[.72rem] tracking-[.12em] text-[#5c5650] uppercase">Tall pills</span><div class="rounded-2xl border border-[#e7e2da] bg-white px-5 pt-[22px] pb-5 shadow-[0_1px_2px_rgba(28,25,23,.04)]">
<div class="flex justify-around gap-1.5">
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-vol" class="text-[.95rem] font-bold text-[#1c1917] tabular-nums">64%</output>
    <div class="relative"><input type="range" id="vt-vol" min="0" max="100" value="64" data-suffix="%" class="m-0 h-[180px] w-[64px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] rounded-[22px] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-vt-accent [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-16 [&::-webkit-slider-runnable-track]:rounded-[22px] [&::-webkit-slider-runnable-track]:shadow-[inset_0_0_0_1px_#8a8178] [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_top,var(--color-vt-accent)_0_calc(6px_+_(100%_-_12px)_*_var(--p)),#e7e2da_0)] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-16 [&::-moz-range-track]:rounded-[22px] [&::-moz-range-track]:shadow-[inset_0_0_0_1px_#8a8178] [&::-moz-range-track]:bg-[linear-gradient(to_top,var(--color-vt-accent)_0_calc(6px_+_(100%_-_12px)_*_var(--p)),#e7e2da_0)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:ml-0 [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-16 [&::-webkit-slider-thumb]:rounded-none [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:[background:linear-gradient(#fff,#fff)_center/24px_4px_no-repeat] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-16 [&::-moz-range-thumb]:rounded-none [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:[background:linear-gradient(#fff,#fff)_center/24px_4px_no-repeat]">
      <svg class="pointer-events-none absolute bottom-4 left-1/2 size-6 -translate-x-1/2 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M18.5 5.5a9 9 0 0 1 0 13"/></svg></div>
    <label for="vt-vol" class="text-[.9rem] font-semibold text-[#1c1917]">Volume</label></div>
  <div class="vt flex min-w-0 flex-col items-center gap-2.5 [--p:0]"><output for="vt-lamp" class="text-[.95rem] font-bold text-[#1c1917] tabular-nums">45%</output>
    <div class="relative"><input type="range" id="vt-lamp" min="0" max="100" value="45" data-suffix="%" class="m-0 h-[180px] w-[64px] cursor-pointer appearance-none bg-transparent [direction:rtl] [writing-mode:vertical-lr] rounded-[22px] focus-visible:outline-2 focus-visible:outline-offset-3 focus-visible:outline-vt-accent [&::-webkit-slider-runnable-track]:h-full [&::-webkit-slider-runnable-track]:w-16 [&::-webkit-slider-runnable-track]:rounded-[22px] [&::-webkit-slider-runnable-track]:shadow-[inset_0_0_0_1px_#8a8178] [&::-webkit-slider-runnable-track]:bg-[linear-gradient(to_top,var(--color-vt-accent)_0_calc(6px_+_(100%_-_12px)_*_var(--p)),#e7e2da_0)] [&::-moz-range-track]:h-full [&::-moz-range-track]:w-16 [&::-moz-range-track]:rounded-[22px] [&::-moz-range-track]:shadow-[inset_0_0_0_1px_#8a8178] [&::-moz-range-track]:bg-[linear-gradient(to_top,var(--color-vt-accent)_0_calc(6px_+_(100%_-_12px)_*_var(--p)),#e7e2da_0)] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:ml-0 [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:h-3 [&::-webkit-slider-thumb]:w-16 [&::-webkit-slider-thumb]:rounded-none [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:[background:linear-gradient(#fff,#fff)_center/24px_4px_no-repeat] [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:h-3 [&::-moz-range-thumb]:w-16 [&::-moz-range-thumb]:rounded-none [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:[background:linear-gradient(#fff,#fff)_center/24px_4px_no-repeat]">
      <svg class="pointer-events-none absolute bottom-4 left-1/2 size-6 -translate-x-1/2 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18h6M10 21h4M12 3a6 6 0 0 0-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0 0 12 3z"/></svg></div>
    <label for="vt-lamp" class="text-[.9rem] font-semibold text-[#1c1917]">Desk lamp</label></div>
</div></div></div>

CSS

@theme {
  --color-vt-accent: #c2410c;
  --color-vt-track: #8a8178;
}

JavaScript

// Keeps each slider's filled track (--p) and its <output> in step with the value.
document.querySelectorAll('.vt input[type="range"]').forEach(function (range) {
  var field = range.closest('.vt');
  var out = field.querySelector('output');
  function sync() {
    var v = Number(range.value);
    var sign = range.hasAttribute('data-signed') ? (v > 0 ? '+' : v < 0 ? '−' : '') : (v < 0 ? '−' : '');
    var text = sign + Math.abs(v).toLocaleString('en-US') + (range.dataset.suffix || '');
    field.style.setProperty('--p', (v - range.min) / (range.max - range.min));
    if (out) out.textContent = text;
    range.setAttribute('aria-valuetext', text);
  }
  range.addEventListener('input', sync);
  sync();
});

About this set

Upright sliders for audio and hardware style interfaces. Five-band equaliser runs five sliders from minus 12 to plus 12 dB; the fill grows from a centre mark at 0 dB up or down to the thumb, so boosts and cuts read at a glance. Mixer faders are long thin slots with flat mixing desk caps and a scale of tick lines behind them, for channel levels such as Vocals, Guitar and Master. Tall pills are 64 pixel wide quick-settings controls for volume or a desk lamp, with the icon at the foot and the value above. None of them rotate anything with transform, which used to break layout and pointer maths. They use writing-mode: vertical-lr, which modern browsers apply to range inputs, together with direction: rtl so the minimum sits at the bottom. The box keeps its real upright size in the layout, and pointer, touch and keyboard input all follow the vertical axis. The fill gradient simply runs to top instead of to right. Values such as +4 dB go into the output above each slider and into aria-valuetext.

What’s included

Vertical inputs through writing-mode, no transform rotation
Equaliser fill that grows from a 0 dB centre mark
Mixer faders with flat caps and a tick scale
Quick-settings pills with icon and value
Signed dB readouts such as +4 dB and −6 dB

Accessibility

Each slider is labelled by the visible band or channel name under it and announces its signed value with the unit through aria-valuetext. The arrow keys, Page Up, Page Down, Home and End move each slider as on any range input, with Up raising the value. Focus shows a ring around the thumb or an outline around the pill.

Customise it

Set --vt-accent, --vt-track, --vt-len (slider length), --vt-w (track width), --vt-cross and --vt-along (thumb size across and along the track) on .vt in the plain CSS and Bootstrap versions. In Tailwind change the --color-vt-* theme colours and the h-, w- and -ml- utilities.

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Range Sliders