<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 displaying even colors in unsupported color spaces
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>
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, white, 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 --gradient
or generated via --stops
+ --color-space
or --gradient
).
Reference
Attributes & Properties
Attribute | Property | Property type | Default value | Description |
---|---|---|---|---|
space |
space |
ColorSpace | string |
oklch |
The color space to use for interpolation. |
color |
color |
Color | string |
oklch(50 50% 180) |
The current color value. |
stops |
stops |
String | Array<Color> |
- | Comma-separated list of color stops |
min |
min |
number |
0 | The minimum value for the slider. |
max |
max |
number |
1 | The maximum value for the slider. |
value |
value |
number |
(this.min + this.max) / 2 |
The current value of the slider. |
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.
Variable | Type | Description |
---|---|---|
--slider-color-stops |
<color># |
Comma-separated list of color stops |
--color-space |
<ident> |
The color space to use for interpolation |
--hue-interpolation |
[shorter | longer | increasing | decreasing] hue |
The color space to use for interpolation |
--slider-gradient |
<image> |
The gradient to use as the background |
Events
Name | Description |
---|---|
input |
Fired when the color changes due to user action |
change |
Fired when the color changes for any reason, and once during initialization |
Planned features
- Discrete scales & steps
Installation
To install all color elements, check out the instructions on the homepage.
The rest of this section is about using only <color-slider>
.
The quick and dirty way is straight from the CDN (kindly provided by Netlify):
<script src="https://elements.colorjs.io/color-slider/color-slider.js" type="module"></script>
or in JS:
import "https://elements.colorjs.io/color-slider/color-slider.js";
If you are using npm to manage your dependencies, you can import it via:
import "color-elements/color-slider";
or:
import { ColorSlider } from "color-elements";