"use client"; import * as React from "react"; import { Slider as SliderPrimitive } from "radix-ui"; import { cn, useControllableState } from "@kineticui/core"; export type TimeRangeSliderProps = { /** [start, end] in minutes from midnight. */ value?: [number, number]; defaultValue?: [number, number]; onValueChange?: (v: [number, number]) => void; min?: number; max?: number; /** Snap step in minutes. */ step?: number; /** Highlighted blocks (busy times) drawn on the track. */ blocked?: [number, number][]; /** 12h or 24h labels. */ format?: "12h" | "24h"; className?: string; }; export const formatMinutes = (m: number, format: "12h" | "24h" = "12h") => { const h = Math.floor(m / 60) % 24; const mm = String(m % 60).padStart(2, "0"); if (format === "24h") return `${String(h).padStart(2, "0")}:${mm}`; return `${h % 12 || 12}:${mm} ${h < 12 ? "am" : "pm"}`; }; /** Dual-thumb time range picker with hour ticks, busy blocks and a duration readout. */ export function TimeRangeSlider({ value, defaultValue = [9 * 60, 17 * 60], onValueChange, min = 6 * 60, max = 22 * 60, step = 15, blocked = [], format = "12h", className }: TimeRangeSliderProps) { const [range, setRange] = useControllableState<[number, number]>({ value, defaultValue, onChange: onValueChange }); const pct = (m: number) => ((m - min) / (max - min)) * 100; const dur = range[1] - range[0]; const clash = blocked.some(([a, b]) => a < range[1] && b > range[0]); const hours = Array.from({ length: Math.floor((max - min) / 60) + 1 }, (_, i) => min + i * 60); return (

{formatMinutes(range[0], format)} → {formatMinutes(range[1], format)}

{Math.floor(dur / 60)}h {dur % 60 ? `${dur % 60}m` : ""} {clash ? " · overlaps" : ""}

setRange([v[0]!, v[1]!])} className="relative flex h-10 w-full touch-none select-none items-center" > {hours.map((h) => ( ))} {blocked.map(([a, b], i) => ( ))} {[0, 1].map((i) => ( ))}

{hours.filter((_, i) => i % 2 === 0).map((h) => ( {format === "24h" ? `${Math.floor(h / 60)}:00` : `${Math.floor(h / 60) % 12 || 12}${Math.floor(h / 60) < 12 ? "a" : "p"}`} ))}

); }

Time Range Slider

Installation

Exports