sp-color-handle

Examples API

Attributes and Properties #

Property Attribute Type Default Description
color color string 'rgba(255, 0, 0, 0.5)'
dir dir 'ltr' | 'rtl' 'ltr'
disabled disabled boolean false
focused focused boolean false
open open boolean false

CSS Custom Properties #

Name Default
--spectrum-colorhandle-fill-color-disabled var(--spectrum-alias-track-color-disabled)
--spectrum-colorhandle-inner-border-color var(--spectrum-global-color-static-white)
--spectrum-colorhandle-inner-border-color-disabled var(--spectrum-global-color-gray-400)
--spectrum-colorhandle-inner-border-size var(--spectrum-global-dimension-static-size-25)
--spectrum-colorhandle-outer-border-color rgba(0,0,0,0.42)
--spectrum-colorhandle-outer-border-size var(--spectrum-alias-border-size-thin)
--spectrum-colorhandle-size var(--spectrum-global-dimension-size-200)

Description #

The <sp-color-handle> is used to select a colour on an <sp-color-area>, <sp-color-slider>, or <sp-color-wheel>. It functions similarly to the handle on an <sp-slider>.

Usage #

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

yarn add @spectrum-web-components/color-handle

Import the side effectful registration of <sp-color-handle> via:

import '@spectrum-web-components/color-handle/sp-color-handle.js';

When looking to leverage the ColorHandle base class as a type and/or for extension purposes, do so via:

import { ColorHandle } from '@spectrum-web-components/color-handle';

Standard #

<sp-color-handle></sp-color-handle>

Disabled #

<sp-color-handle disabled></sp-color-handle>

Open #

When the <sp-color-handle> uses the open property, the <sp-color-loupe> component can be used above the handle to show the selected color that would otherwise be covered by a mouse, stylus, or finger on the down/touch state. This can be customized to appear only on finger-input, or always appear regardless of input type.

<div style="height: var(--spectrum-global-dimension-size-900)"></div>
<sp-color-handle open></sp-color-handle>