@spectrum-web-components/color-handle
Advanced tools
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>`.
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>.
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';
<sp-color-handle></sp-color-handle>
<sp-color-handle disabled></sp-color-handle>
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: 72px"></div>
<sp-color-handle open></sp-color-handle>
FAQs
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.
The npm package @spectrum-web-components/color-handle receives a total of 2,372 weekly downloads. As such, @spectrum-web-components/color-handle popularity was classified as popular.
We found that @spectrum-web-components/color-handle demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.