Range Slider

Selects a minimum and maximum.

html

<fieldset class="range-slider" style="--accent:#D9C8F0;">
  <legend>Price range</legend>
  <div class="range-slider__value">£20 – £80</div>
  <div class="range-slider__track">
    <input type="range" aria-label="Minimum" class="range-slider__input" min="0" max="100" value="20">
    <input type="range" aria-label="Maximum" class="range-slider__input" min="0" max="100" value="80">
  </div>
</fieldset>
<style>
.range-slider { border: none; padding: 0; margin: 0; font: 14px system-ui, sans-serif; color: #241430; max-width: 280px; }
.range-slider legend { font-weight: 500; padding: 0; margin-bottom: 8px; }
.range-slider__value { font-weight: 600; margin-bottom: 8px; }
.range-slider__track { position: relative; height: 24px; }
.range-slider__input { position: absolute; top: 0; left: 0; width: 100%; margin: 0; appearance: none; background: none; pointer-events: none; accent-color: var(--accent); }
.range-slider__input::-webkit-slider-thumb { pointer-events: auto; }
.range-slider__input::-moz-range-thumb { pointer-events: auto; }
.range-slider__input:focus-visible { outline: 2px solid #241430; outline-offset: 3px; }
</style>

tailwind

<fieldset class="border-0 p-0 m-0 font-sans text-sm text-[#241430] max-w-[280px]" style="--accent:#D9C8F0;">
  <legend class="font-medium p-0 mb-2">Price range</legend>
  <div class="font-semibold mb-2">£20 – £80</div>
  <div class="relative h-6">
    <input type="range" aria-label="Minimum" class="range-tw absolute top-0 left-0 w-full m-0 appearance-none bg-transparent pointer-events-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]" min="0" max="100" value="20" style="accent-color:#D9C8F0;">
    <input type="range" aria-label="Maximum" class="range-tw absolute top-0 left-0 w-full m-0 appearance-none bg-transparent pointer-events-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]" min="0" max="100" value="80" style="accent-color:#D9C8F0;">
  </div>
</fieldset>
<style>
.range-tw::-webkit-slider-thumb { pointer-events: auto; }
.range-tw::-moz-range-thumb { pointer-events: auto; }
</style>

react

export function RangeSlider({
  legend = "Price range",
  min = 20,
  max = 80,
  unit = "£",
  accent = "#D9C8F0",
}) {
  return (
    <fieldset style={{ border: "none", padding: 0, margin: 0, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", maxWidth: 280 }}>
      <legend style={{ fontWeight: 500, padding: 0, marginBottom: 8 }}>{legend}</legend>
      <div style={{ fontWeight: 600, marginBottom: 8 }}>{unit}{min} – {unit}{max}</div>
      <div style={{ position: "relative", height: 24 }}>
        <input type="range" aria-label="Minimum" min={0} max={100} defaultValue={min} style={{ position: "absolute", top: 0, left: 0, width: "100%", margin: 0, accentColor: accent }} />
        <input type="range" aria-label="Maximum" min={0} max={100} defaultValue={max} style={{ position: "absolute", top: 0, left: 0, width: "100%", margin: 0, accentColor: accent }} />
      </div>
    </fieldset>
  );
}