<color-slider>

Creates a slider with a gradient background, primarily intended for color picking.

Usage

There are many ways to use this component, depending on what you need. E.g. if all you need is styling sliders with arbitrary gradients you don’t even need a component, you can just use the CSS file and a few classes and CSS variables to style regular HTML sliders.

The actual component does a lot more:

• It provides a color property with the actual color value
• It takes care of even displaying colors in unsupported color spaces
• Editable tooltip showing the current value or progress (optional)
• Convenient events like colorchange and valuechange that fire even when the value changes programmatically

Basic example:

<color-slider space="hsl"
              stops="oklch(90% 50% 100), darkcyan, indigo"></color-slider>

You can listen to the colorchange event and grab the color property to get the current color value:

<color-slider space="hsl"
              stops="red, yellow, lime, aqua, blue, magenta, red"
              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<output></output>

In fact, you can combine it with a <color-inline> or <color-swatch> element to display the color in a more visual way:

<color-slider space="oklch"
              stops="oklch(80% 50% 70), oklch(65% 50% 180)"
              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<color-inline></color-inline>

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

<color-slider space="okhsl" stops="gold, color(--okhsl 180 100% 50%)"></color-slider>

You can set the value attribute to specify an initial color other than the midpoint:

<color-slider space="oklch"
              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
			  value="0.1"
              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<color-inline></color-inline>

You can use a different min and max value and it’s just linearly mapped to the stops:

<color-slider space="oklch"
              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
			  min="-50" max="50" value="20"
              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<color-inline></color-inline>

You can add an editable tooltip by simply using the tooltip attribute:

<color-slider space="oklch"
              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
			  min="-50" max="50" value="20"
              tooltip
              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<color-inline></color-inline>

By default, the tooltip will show the slider value as a number. If you want to show the progress instead, you can specify "progress" as the attribute value:

<color-slider space="oklch"
              stops="oklch(85% 50% 80), oklch(65% 50% 180)"
			  min="-50" max="50" value="20"
              tooltip="progress"
              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<color-inline></color-inline>

All properties are reactive and can be set programmatically:

<button onclick="this.nextElementSibling.value = Math.random()">Random color</button>
<color-slider space="oklch"
              stops="gold, darkcyan, indigo"
              oncolorchange="this.nextElementSibling.textContent = this.color"></color-slider>
<color-swatch></color-swatch>

You can style it to look quite different:

<style>
.lr-slider {
    --slider-height: .3em;
    --slider-thumb-width: 1em;
    --slider-thumb-height: 1em;
    --slider-thumb-radius: 1em;
    --slider-thumb-border: 3px solid oklab(50% 0 0);
}
</style>
<color-slider class="lr-slider" space="oklch"
              stops="yellowgreen, gold, red"></color-slider>

CSS-only usage

If you just want the styling of <color-slider> and not any of the API (or are fine dealing with the lower level details on your own), you can just use the CSS file:

@import url("https://elements.colorjs.io/src/color-slider/color-slider.css");

This is perfect for when the gradient is more of a visual aid than a functional part of your UI, e.g. when picking a temperature:

<style>
    @import url("color-slider.css");
</style>
<label>
    Temperature:
    <input type="range" class="color-slider" min="-20" max="50" value="15"
           style="--slider-color-stops: oklch(65% 0.1 250), yellowgreen, gold, orange, red, darkred" />
</label>

Then use a color-slider class on your slider element, and use CSS variables to set the gradient (either directly via --slider-gradient or generated via --slider-color-stops + --color-space).

Reference

Slots

Attributes & Properties

CSS variables

If you’re using the component, these are mostly set automatically. If you’re only using the CSS file, you should set these yourself.

Events

Parts

Planned features

• Discrete scales & steps

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

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

import "color-elements/color-slider";

import { ColorSlider } from "color-elements";