ColorSlider

A colour slider moves a single channel — hue, saturation, alpha — and paints its own track with the colours that channel would produce, so the track is the preview. Two channels at once want a ColorArea; a set of fixed choices wants a ColorSwatchPicker.

import { ColorSlider, ColorSliderOutput, ColorSliderThumb, ColorSliderTrack, Label } from "ropav";

ColorSliderTrack is the painted bar and ColorSliderThumb is the handle on it. ColorSliderOutput prints the current value, and a Label names the channel.

Hue

200°

orientation

 horizontalvertical

isDisabled

<ColorSlider channel="hue" class="w-72" color-space="hsl" default-value="hsl(200, 100%, 50%)">
  <Label>Hue</Label>
  <ColorSliderOutput />
  <ColorSliderTrack>
    <ColorSliderThumb />
  </ColorSliderTrack>
</ColorSlider>

Several channels, one colour

channel is required — a slider with no channel has nothing to move. Point several sliders at the same value and each one edits its own channel of it, which is how a picker is built out of parts rather than out of one widget.

Hue

200°

Saturation

100%

Lightness

50%

color-slider-channels.vue

<script setup lang="ts">
import { ColorSlider, ColorSliderOutput, ColorSliderThumb, ColorSliderTrack, Label } from "ropav";
import { shallowRef } from "vue";

const color = shallowRef("hsl(200, 100%, 50%)");

const channels = [
  { channel: "hue", label: "Hue" },
  { channel: "saturation", label: "Saturation" },
  { channel: "lightness", label: "Lightness" },
] as const;
</script>

<template>
  <div class="stack">
    <ColorSlider
      v-for="item in channels"
      :key="item.channel"
      v-model:value="color"
      :channel="item.channel"
      color-space="hsl"
    >
      <Label>{{ item.label }}</Label>
      <ColorSliderOutput />
      <ColorSliderTrack>
        <ColorSliderThumb />
      </ColorSliderTrack>
    </ColorSlider>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  width: 100%;
  max-width: var(--rp-container-sm);
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 4);
}
</style>

color-space says which space the channel belongs to. A combination that cannot work — red in hsl — is corrected with a warning rather than left painting nothing, so a mismatch shows up in the console instead of as an empty bar. Left out, the space is taken from the value itself.

Inside a ColorPicker the value comes from the picker and no v-model is needed at all.

Accessibility

• The thumb is a real range input, so the arrow keys move the channel by a step and Home and End jump to the ends of it.
• A slider names itself after its channel when nothing else names it, so "Hue" is announced without a Label — but a page with two hue sliders on it needs aria-label to say which is which.
• The value is announced in the channel's own terms, a degree or a percentage, rather than as a raw number. That is what makes a colour adjustable without seeing the track.

API

ColorSlider

Prop	Type	Default	Description
ariaDescribedby	string	—	Ids of the elements that describe the slider.
ariaLabel	string	—	Accessible name. Without one the slider is named after its channel.
ariaLabelledby	string	—	Ids of the elements that name the slider.
channel*	"alpha" | "blue" | "brightness" | "green" | "hue" | "lightness" | "red" | "saturation"	—	The channel the slider drives.
colorSpace	"hsb" | "hsl" | "rgb"	—	The space the slider works in; channel has to belong to it. A combination that cannot work — channel="red" in hsl — is corrected with a warning rather than left to paint nothing. Defaults to the space the value itself is in.
defaultValue	string | Color	—	Colour used while the slider is uncontrolled.
form	string	—	id of the form to submit with, for a slider rendered outside it.
id	string	—	Id of the track, which carries the group role, and the stem the thumb id grows from.
isDisabled	boolean	—
name	string	—	Name submitted with the form.
orientation	"horizontal" | "vertical"	"horizontal"
value	string | Color	—	Current colour. A string is parsed.

The default slot receives:

Slot prop	Type
color	Color
isDisabled	boolean
orientation	SliderOrientation

Event	Payload
change	Color
changeEnd	Color
update:value	Color

ColorSliderOutput

Slots: default.

ColorSliderThumb

The default slot receives:

Slot prop	Type
color	Color
isDisabled	boolean
isDragging	boolean
isFocused	boolean
isFocusVisible	boolean
isHovered	boolean

ColorSliderTrack

The default slot receives:

Slot prop	Type
color	Color
isDisabled	boolean
orientation	SliderOrientation