Slider — Vanilla

Range slider with vanilla HTML. Ensure Rizzo CSS and init script to sync fill width.

Slider

Range input with themed track and fill. Use slider__input, slider__track, slider__fill. Wire input/change to update slider__fill width and aria-valuenow.

Add this component

The command below includes <strong>Slider</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<div class="slider" data-slider>
  <input type="range" class="slider__input" min="0" max="100" value="50" aria-label="Volume" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" data-slider-input />
  <div class="slider__track" aria-hidden="true">
    <div class="slider__fill" data-slider-fill style="width: 50%;"></div>
  </div>
</div>

JavaScript (sync fill and aria-valuenow)

javascript javascript 
document.querySelectorAll('.slider[data-slider]').forEach(function(slider) {
  var input = slider.querySelector('[data-slider-input]');
  var fill = slider.querySelector('[data-slider-fill]');
  if (!input || !fill) return;
  function update() {
    var min = parseFloat(input.getAttribute('min')) || 0;
    var max = parseFloat(input.getAttribute('max')) || 100;
    var val = parseFloat(input.value) || min;
    var pct = max > min ? ((val - min) / (max - min)) * 100 : 0;
    fill.style.width = pct + '%';
    input.setAttribute('aria-valuenow', String(val));
  }
  input.addEventListener('input', update);
  input.addEventListener('change', update);
  update();
});

Other frameworks: Astro · Svelte · Vue · React