Slider

Selects a value along a range.

html

<label class="slider-field" for="sl-1">
  <span class="slider-field__row"><span>Volume</span><span class="slider-field__value">60</span></span>
  <input type="range" id="sl-1" class="slider-field__input" min="0" max="100" value="60" style="accent-color:#BFD9F2;">
</label>
<style>
.slider-field { display: block; font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; }
.slider-field__row { display: flex; justify-content: space-between; margin-bottom: 8px; }
.slider-field__value { font-weight: 600; }
.slider-field__input { width: 100%; cursor: pointer; }
.slider-field__input:focus-visible { outline: 2px solid #241430; outline-offset: 3px; }
</style>

tailwind

<label for="sl-1-tw" class="block font-sans text-sm text-[#241430] max-w-[280px]">
  <span class="flex justify-between mb-2"><span>Volume</span><span class="font-semibold">60</span></span>
  <input type="range" id="sl-1-tw" min="0" max="100" value="60" class="w-full cursor-pointer focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430] focus-visible:outline-offset-[3px]" style="accent-color:#BFD9F2;">
</label>

react

export function Slider({
  label = "Volume",
  value = 60,
  min = 0,
  max = 100,
  accent = "#BFD9F2",
}) {
  return (
    <label style={{ display: "block", fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 280 }}>
      <span style={{ display: "flex", justifyContent: "space-between", marginBottom: 8 }}>
        <span>{label}</span>
        <span style={{ fontWeight: 600 }}>{value}</span>
      </span>
      <input type="range" min={min} max={max} defaultValue={value} style={{ width: "100%", cursor: "pointer", accentColor: accent }} />
    </label>
  );
}