Shim

ColorSlider

Adjust an individual color channel with a slider.

Documentation
React Aria
Pattern
W3C ARIA
Source
GitHub
Issues
Report
Composes
Field·Slider
Install
pnpm dlx @kkga/shim add color-slider
20°
import { ColorSlider } from "@/shim-ui/color-slider";

export default () => (
  <ColorSlider channel="hue" defaultValue="hsl(20, 100%, 50%)" label="Hue" />
);

Install

Use the CLI or copy the source code manually.

pnpm dlx @kkga/shim add color-slider

Size

Use the size prop to set the size of the color slider.

50%
50%
50%
50%
import { ColorSlider } from "@/shim-ui/color-slider";

export default () => (
  <>
    {([1, 2, 3, 4] as const).map((size) => (
      <ColorSlider
        channel="alpha"
        defaultValue="hsla(0, 100%, 50%, 0.5)"
        key={size}
        label="Alpha"
        size={size}
      />
    ))}
  </>
);

Orientation

Use the orientation prop to control the orientation of the color slider.

import { ColorSlider } from "@/shim-ui/color-slider";

export default () => (
  <div className="flex gap-4">
    {([1, 2, 3, 4] as const).map((size) => (
      <ColorSlider
        aria-label="Alpha"
        channel="alpha"
        defaultValue="hsla(0, 100%, 50%, 0.5)"
        key={size}
        orientation="vertical"
        size={size}
      />
    ))}
  </div>
);