Range Slider

dual x thumb

Dual-thumb range slider with coloured track fill. From Bundui.

sliderrangedualbundui

50%

Code

slider-range.tsx

"use client";
import { useState } from "react";

export function RangeSlider({ min = 0, max = 100, defaultValue = 50, suffix = "%" }) {
  const [val, setVal] = useState(defaultValue);
  return (
    <div className="w-full">
      <input type="range" min={min} max={max} value={val} onChange={(e) => setVal(Number(e.target.value))}
        className="h-2 w-full cursor-pointer appearance-none rounded-full bg-muted accent-brand [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand [&::-webkit-slider-thumb]:shadow" />
      <div className="mt-2 text-center font-mono text-sm">{val}{suffix}</div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Range Slider component and wire it to my accent.”