Form Controls

Range Slider

The .quanta-range component creates a styled slider with a track, fill, thumb, and optional value bubble. Use .quanta-range-container to wrap label, slider, and bubble together.

Basic Usage

Wrap the native input[type="range"] in the Quanta container and include track & fill elements:

<div class="quanta-range-container">
  <label for="volume" class="quanta-label">Volume</label>
  <div class="quanta-range-wrapper">
    <div class="quanta-range-track"></div>
    <div class="quanta-range-fill" id="volume-fill"></div>
    <input
      type="range"
      id="volume"
      class="quanta-range quanta-range-primary"
      min="0"
      max="100"
      value="50"
    />
    <div class="quanta-range-value" id="volume-value">50</div>
  </div>
</div>

Volume

Semantic Variants

Change thumb, fill, and bubble color by adding one of: .quanta-range-success, .quanta-range-warning, .quanta-range-danger, .quanta-range-info.

<input type="range" class="quanta-range quanta-range-success" … />
<input type="range" class="quanta-range quanta-range-warning" … />

Progress

Brightness

Value Bubble

The value bubble floats above the thumb showing the current value. Update its position & text via JavaScript on input events.

// Example JS (not included here)
const slider = document.getElementById('volume');
const fill  = document.getElementById('volume-fill');
const value = document.getElementById('volume-value');
slider.addEventListener('input', e => {
  const pct = (e.target.value / e.target.max) * 100;
  fill.style.width = pct + '%';
  value.style.left = pct + '%';
  value.textContent = e.target.value;
});

Dark & Responsive

In dark mode, track and bubble colors adapt for contrast. On small screens, the thumb and bubble shrink for comfortable touch.