<channel-slider>

A <color-slider> for a specific channel, intended for color picking.

Usage

This is a higher level component than <color-slider> for the cases where you want to control a single channel of a color space. It offers many conveniences for these cases:

Static

Basic example:

<channel-slider space="oklch" channel="h"></channel-slider>

In most cases you’d also want to set a color to set the other channels and the initial value:

<channel-slider space="oklch" channel="h" color="oklch(80% 20% 130)"></channel-slider>

This will automatically use the whole reference range of that component in the specified color space, and use the current value of the component as the starting value (unless value is also specified).


The color does not actually need to be in the same color space, it will be converted if needed:

<channel-slider space="oklch" channel="h" color="deeppink"></channel-slider>

Colors and color spaces not supported by the browser also work:

<channel-slider space="okhsl" channel="h" color="color(--okhsl 180 100% 50%)"></channel-slider>

If you don’t want to show the whole range you can also specify min and max attributes.

<channel-slider space="oklch" channel="l" color="red" min=".3" max=".95"></channel-slider>

Dynamic

You can listen to the colorchange event and grab the color property to get the current color value. Here we are using a <color-swatch> to not just display the CSS code but also the actual color:

<channel-slider space="oklch" channel="h" color="oklch(50% 50% 180)"
				oncolorchange="this.nextElementSibling.textContent = this.color"></channel-slider>
<color-swatch></color-swatch>

All attributes are reactive:

<label>
	Space:
	<select id="space_select" size="3">
		<option>oklch</option>
		<option>oklab</option>
		<option>okhsl</option>
		<option>lab</option>
		<option>lch</option>
		<option>hsl</option>
		<option>srgb</option>
	</select>
</label>
<label>
	Channel:
	<select id="channel_select" size=3>
		<option>l</option>
		<option>c</option>
		<option>h</option>
	</select>
</label>

<channel-slider id="dynamic_slider" space="oklch" channel="h" color="oklch(50% 50% 180)"
				oncolorchange="this.nextElementSibling.textContent = this.color"></channel-slider>
<color-swatch></color-swatch>
<script>
	function fromSlider () {
		space_select.value = dynamic_slider.space.id;
		channel_select.innerHTML = Object.keys(dynamic_slider.space.coords).map(c => `<option>${c}</option>`).join('\n');
		channel_select.value = dynamic_slider.channel;
	}

	function fromSelects () {
		dynamic_slider.space = space_select.value;
		dynamic_slider.channel = channel_select.value;
	}

	space_select.oninput = channel_select.oninput = fromSelects;

	customElements.whenDefined("channel-slider").then(fromSlider);
	dynamic_slider.addEventListener("propchange", fromSlider);
</script>

Reference

Attributes & Properties

Attribute Property Property type Default value Description
space space ColorSpace | string oklch The color space to use for interpolation.
channel channel string h The component to use for the gradient.
min min number this.refRange[0] The minimum value for the slider.
max max number this.refRange[1] The maximum value for the slider.
step step number Computed automatically based on this.min and this.max. The granularity that the slider’s current value must adhere to.
value value number (this.min + this.max) / 2 The current value of the slider.
color color Color | string oklch(50% 50% 180) The current color value.
- minColor Color oklch(0% 50% 180) The minimum color value (read-only).
- maxColor Color oklch(100% 50% 180) The maximum color value (read-only).

Events

Name Description
input Fired when the color changes due to user action.
change Fired when the color changes due to user action.
valuechange Fired when the value changes for any reason, and once during initialization.
colorchange Fired when the color changes for any reason, and once during initialization.

Installation

To install all color elements, check out the instructions on the homepage. The rest of this section is about using only <channel-slider>.

The quick and dirty way is straight from the CDN (kindly provided by Netlify):

<script src="https://elements.colorjs.io/src/channel-slider/channel-slider.js" type="module"></script>

or in JS:

import "https://elements.colorjs.io/src/channel-slider/channel-slider.js";

If you are using npm to manage your dependencies, you can import it via:

import "color-elements/channel-slider";

or:

import { ChannelSlider } from "color-elements";