"use client"; import * as React from "react"; type ColorChannel = | "hue" | "saturation" | "lightness" | "alpha" | "red" | "green" | "blue"; type ColorSpace = "hsl" | "rgb"; type ParsedColor = { space: ColorSpace; h: number; s: number; l: number; a: number; r: number; g: number; b: number; }; type ColorValue = { raw: ParsedColor; toString: (format?: "css" | "hsl" | "rgb") => string; }; type ColorSliderRenderProps = { color: ColorValue; isDisabled: boolean; orientation: "horizontal" | "vertical"; state: { getThumbValueLabel: () => string; value: ColorValue; }; }; type ColorSliderProps = Omit, "children" | "defaultValue" | "onChange"> & { channel: ColorChannel; colorSpace?: ColorSpace; defaultValue?: string; value?: string | ColorValue; onChange?: (value: ColorValue) => void; onChangeEnd?: (value: ColorValue) => void; orientation?: "horizontal" | "vertical"; isDisabled?: boolean; children?: React.ReactNode | ((props: ColorSliderRenderProps) => React.ReactNode); }; type SlotProps = React.HTMLAttributes & { children?: React.ReactNode | ((props: ColorSliderRenderProps) => React.ReactNode); }; const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value)); const round = (value: number, precision = 0) => Number(value.toFixed(precision)); function hslToRgb(h: number, s: number, l: number) { s /= 100; l /= 100; const c = (1 - Math.abs(2 * l - 1)) * s; const x = c * (1 - Math.abs(((h / 60) % 2) - 1)); const m = l - c / 2; let r = 0; let g = 0; let b = 0; if (h < 60) [r, g, b] = [c, x, 0]; else if (h < 120) [r, g, b] = [x, c, 0]; else if (h < 180) [r, g, b] = [0, c, x]; else if (h < 240) [r, g, b] = [0, x, c]; else if (h < 300) [r, g, b] = [x, 0, c]; else [r, g, b] = [c, 0, x]; return { r: round((r + m) * 255), g: round((g + m) * 255), b: round((b + m) * 255), }; } function rgbToHsl(r: number, g: number, b: number) { r /= 255; g /= 255; b /= 255; const max = Math.max(r, g, b); const min = Math.min(r, g, b); let h = 0; let s = 0; const l = (max + min) / 2; if (max !== min) { const d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); if (max === r) h = (g - b) / d + (g < b ? 6 : 0); if (max === g) h = (b - r) / d + 2; if (max === b) h = (r - g) / d + 4; h *= 60; } return { h: round(h), s: round(s * 100), l: round(l * 100) }; } function parseColor(input: string | ColorValue | undefined, fallback = "hsl(0, 100%, 50%)"): ParsedColor { if (typeof input === "object" && input && "raw" in input) return input.raw; const value = String(input || fallback).trim(); const hsl = value.match(/hsla?$([-\d.]+),\s*([-\d.]+)%?,\s*([-\d.]+)%?(?:,\s*([-\d.]+))?$/i); if (hsl) { const h = clamp(Number(hsl[1]), 0, 360); const s = clamp(Number(hsl[2]), 0, 100); const l = clamp(Number(hsl[3]), 0, 100); const a = clamp(Number(hsl[4] ?? 1), 0, 1); return { space: "hsl", h, s, l, a, ...hslToRgb(h, s, l) }; } const rgb = value.match(/rgba?$([-\d.]+),\s*([-\d.]+),\s*([-\d.]+)(?:,\s*([-\d.]+))?$/i); if (rgb) { const r = clamp(Number(rgb[1]), 0, 255); const g = clamp(Number(rgb[2]), 0, 255); const b = clamp(Number(rgb[3]), 0, 255); const a = clamp(Number(rgb[4] ?? 1), 0, 1); return { space: "rgb", r, g, b, a, ...rgbToHsl(r, g, b) }; } return parseColor(fallback); } function makeColor(raw: ParsedColor): ColorValue { return { raw, toString(format = "css") { if (format === "rgb" || raw.space === "rgb") { return raw.a < 1 ? `rgba(${round(raw.r)}, ${round(raw.g)}, ${round(raw.b)}, ${round(raw.a, 2)})` : `rgb(${round(raw.r)}, ${round(raw.g)}, ${round(raw.b)})`; } return raw.a < 1 ? `hsla(${round(raw.h)}, ${round(raw.s)}%, ${round(raw.l)}%, ${round(raw.a, 2)})` : `hsl(${round(raw.h)}, ${round(raw.s)}%, ${round(raw.l)}%)`; }, }; } function rangeFor(channel: ColorChannel) { if (channel === "hue") return { min: 0, max: 360, step: 1 }; if (channel === "alpha") return { min: 0, max: 1, step: 0.01 }; if (channel === "red" || channel === "green" || channel === "blue") return { min: 0, max: 255, step: 1 }; return { min: 0, max: 100, step: 1 }; } function getChannelValue(color: ParsedColor, channel: ColorChannel) { if (channel === "hue") return color.h; if (channel === "saturation") return color.s; if (channel === "lightness") return color.l; if (channel === "alpha") return color.a; if (channel === "red") return color.r; if (channel === "green") return color.g; return color.b; } function withChannelValue(color: ParsedColor, channel: ColorChannel, value: number, colorSpace?: ColorSpace): ParsedColor { if (channel === "red" || channel === "green" || channel === "blue") { const next = { ...color, space: "rgb" as const }; if (channel === "red") next.r = value; if (channel === "green") next.g = value; if (channel === "blue") next.b = value; return { ...next, ...rgbToHsl(next.r, next.g, next.b) }; } const next = { ...color, space: colorSpace || "hsl" }; if (channel === "hue") next.h = value; if (channel === "saturation") next.s = value; if (channel === "lightness") next.l = value; if (channel === "alpha") next.a = value; return { ...next, ...hslToRgb(next.h, next.s, next.l) }; } function labelFor(color: ParsedColor, channel: ColorChannel) { const value = getChannelValue(color, channel); if (channel === "hue") return `${round(value)}°`; if (channel === "alpha") return `${round(value * 100)}%`; if (channel === "saturation" || channel === "lightness") return `${round(value)}%`; return `${round(value)}`; } function trackBackground(color: ParsedColor, channel: ColorChannel, orientation: "horizontal" | "vertical" = "horizontal") { const direction = orientation === "vertical" ? "to top" : "to right"; if (channel === "hue") return `linear-gradient(${direction}, rgb(255,0,0), rgb(255,255,0), rgb(0,255,0), rgb(0,255,255), rgb(0,0,255), rgb(255,0,255), rgb(255,0,0))`; if (channel === "saturation") return `linear-gradient(${direction}, hsl(${color.h}, 0%, ${color.l}%), hsl(${color.h}, 100%, ${color.l}%))`; if (channel === "lightness") return `linear-gradient(${direction}, hsl(${color.h}, ${color.s}%, 0%), hsl(${color.h}, ${color.s}%, 50%), hsl(${color.h}, ${color.s}%, 100%))`; if (channel === "alpha") return `linear-gradient(${direction}, hsla(${color.h}, ${color.s}%, ${color.l}%, 0), hsla(${color.h}, ${color.s}%, ${color.l}%, 1))`; if (channel === "red") return `linear-gradient(${direction}, rgb(0, ${color.g}, ${color.b}), rgb(255, ${color.g}, ${color.b}))`; if (channel === "green") return `linear-gradient(${direction}, rgb(${color.r}, 0, ${color.b}), rgb(${color.r}, 255, ${color.b}))`; return `linear-gradient(${direction}, rgb(${color.r}, ${color.g}, 0), rgb(${color.r}, ${color.g}, 255))`; } const ColorSliderContext = React.createContext<{ props: ColorSliderRenderProps; percent: number; channel: ColorChannel; setValueFromPointer: (event: React.PointerEvent) => void; } | null>(null); function ColorSliderStyles() { return ( ); } function ColorSliderRoot({ channel, children, className = "", colorSpace, defaultValue, value, onChange, onChangeEnd, orientation = "horizontal", isDisabled = false, ...props }: ColorSliderProps) { const [uncontrolled, setUncontrolled] = React.useState(() => makeColor(parseColor(defaultValue))); const current = typeof value === "undefined" ? uncontrolled : makeColor(parseColor(value)); const range = rangeFor(channel); const channelValue = getChannelValue(current.raw, channel); const percent = ((channelValue - range.min) / (range.max - range.min)) * 100; const [dragging, setDragging] = React.useState(false); const [focusVisible, setFocusVisible] = React.useState(false); const commit = React.useCallback( (nextRaw: ParsedColor, end = false) => { const next = makeColor(nextRaw); if (typeof value === "undefined") setUncontrolled(next); onChange?.(next); if (end) onChangeEnd?.(next); }, [onChange, onChangeEnd, value], ); const setValueFromPointer = React.useCallback( (event: React.PointerEvent) => { if (isDisabled) return; const rect = event.currentTarget.getBoundingClientRect(); const ratio = orientation === "vertical" ? 1 - clamp((event.clientY - rect.top) / rect.height, 0, 1) : clamp((event.clientX - rect.left) / rect.width, 0, 1); const nextValue = range.min + ratio * (range.max - range.min); commit(withChannelValue(current.raw, channel, round(nextValue, channel === "alpha" ? 2 : 0), colorSpace)); }, [channel, colorSpace, commit, current.raw, isDisabled, orientation, range.max, range.min], ); const onKeyDown = (event: React.KeyboardEvent) => { if (isDisabled) return; const increment = event.key === "PageUp" || event.key === "PageDown" ? range.step * 10 : range.step; let next = channelValue; if (event.key === "ArrowRight" || event.key === "ArrowUp" || event.key === "PageUp") next += increment; else if (event.key === "ArrowLeft" || event.key === "ArrowDown" || event.key === "PageDown") next -= increment; else if (event.key === "Home") next = range.min; else if (event.key === "End") next = range.max; else return; event.preventDefault(); commit(withChannelValue(current.raw, channel, clamp(round(next, channel === "alpha" ? 2 : 0), range.min, range.max), colorSpace), true); }; const renderProps: ColorSliderRenderProps = { color: current, isDisabled, orientation, state: { getThumbValueLabel: () => labelFor(current.raw, channel), value: current, }, }; const startColor = makeColor(withChannelValue(current.raw, channel, range.min, colorSpace)).toString("css"); const endColor = makeColor(withChannelValue(current.raw, channel, range.max, colorSpace)).toString("css"); return (

{typeof children === "function" ? children(renderProps) : children}

); } function Output({ children, className = "", ...props }: SlotProps) { const ctx = React.useContext(ColorSliderContext); if (!ctx) return null; return ( {typeof children === "function" ? children(ctx.props) : children || ctx.props.state.getThumbValueLabel()} ); } function Track({ children, className = "", ...props }: SlotProps) { const ctx = React.useContext(ColorSliderContext); if (!ctx) return null; const { props: renderProps, channel, setValueFromPointer } = ctx; return (

{ if (renderProps.isDisabled) return; (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId); setValueFromPointer(event); }} onPointerMove={(event) => { if ((event.buttons & 1) === 1) setValueFromPointer(event); }} {...props} > {typeof children === "function" ? children(renderProps) : children}

); } function Thumb({ children, className = "", ...props }: SlotProps) { const ctx = React.useContext(ColorSliderContext); const [dragging, setDragging] = React.useState(false); const [focusVisible, setFocusVisible] = React.useState(false); if (!ctx) return null; const { props: renderProps, channel } = ctx; const range = rangeFor(channel); const value = getChannelValue(renderProps.color.raw, channel); return (

{ setFocusVisible(false); props.onBlur?.(event); }} onFocus={(event) => { setFocusVisible(true); props.onFocus?.(event); }} onKeyDown={(event) => { props.onKeyDown?.(event); }} onPointerDown={(event) => { setDragging(true); props.onPointerDown?.(event); }} onPointerUp={(event) => { setDragging(false); props.onPointerUp?.(event); }} {...props} > {typeof children === "function" ? children(renderProps) : children}

); } function Label({ className = "", ...props }: React.LabelHTMLAttributes) { return ; } function ColorSwatch({ color, size = "sm", className = "" }: { color: string | ColorValue; size?: "sm" | "md"; className?: string }) { const parsed = makeColor(parseColor(color)); return ( ); } const ColorSlider = Object.assign(ColorSliderRoot, { Output, Track, Thumb }); export { ColorSlider, Label, ColorSwatch, makeColor, parseColor };

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Explore

Build

ColorSlider

Created by

Installation

How to use

Website