An `<sp-color-slider>` lets users visually change an individual channel of a color. The background of the `<sp-color-slider>` is a visual representation of the range of values a user can select from. This can represent color properties such as hues, color

React and Next.js wrapper of the @spectrum-web-components/color-slider component

`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are invariable.

Spectrum UI components in React

The `<sp-color-handle>` is used to select a color on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It provides a draggable control point for precise color selection within color components.

Slider

Spectrum UI components in React

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library implementing Adobe's Spectrum design system. This package defines the CSS custom properties that implement design tokens from [Spectrum Tok

`<sp-theme>` provides Spectrum design tokens (CSS custom properties) to everything in its DOM scope. Components inside a theme use these tokens to render correctly. The element itself does not visually “apply” styles to your app; it exposes the tokens so

An `<sp-color-area>` allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel to create comprehensive color selection interfaces.

Spectrum UI components in React

View docs [here](https://radix-ui.com/primitives/docs/components/slider).

An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

Spectrum UI components in React

Web component implementation of a Spectrum design ColorField

Spectrum UI components in React

Deliver [Spectrum Workflow Icons](https://spectrum.adobe.com/page/icons/) as either:

Spectrum UI components in React

Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:

An `<sp-link>` allows users to navigate to a different location. They can be presented in-line inside a paragraph or as a standalone text.