Time Window Slider

A dual-handle range slider for picking a start and end hour (e.g. business or availability hours) with a draggable filled track, hour tick marks, and a live "09:00 – 18:00" readout. Ported to React from the original HTML/CSS/JS "Matte" slider by SLtowl (sl-ui-library), MIT licensed.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Time Window Slider to your project and fits it to your theme.

import HoursSlider from "@/components/ui/matte-hours-slider";

export default function HoursSliderDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-[#f5f4f2] p-10">
      <HoursSlider />
    </div>
  );
}