Color Slider

#Anatomy

• #track: Content inside the generated gradient track. Receives value and channel.
• #thumb: Decorative thumb content. Receives value, channelValue, and percentage.

#Usage

<script setup lang="ts">
import { ColorArea, ColorPicker, ColorSlider } from "akaza-ui";
import { ref } from "vue";
const color = ref("#56d799");
const areaUi = {
  root: "aspect-square w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring",
  area: "rounded-lg",
  thumb: "size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm",
};
const sliderUi = {
  root: "h-6 w-full rounded-md data-[akaza-disabled]:opacity-50",
  axis: "peer outline-none",
  track: "h-3 w-full rounded-full bg-muted",
  thumb:
    "size-6 rounded-full border-2 border-neutral-400 bg-white shadow-sm peer-data-[akaza-focus-visible]:ring-2 peer-data-[akaza-focus-visible]:ring-ring peer-data-[akaza-focus-visible]:ring-offset-2 peer-data-[akaza-focus-visible]:ring-offset-background",
};
</script>

<template>
  <div class="grid gap-4">
    <output class="text-sm text-muted-foreground">Current: {{ color }}</output>
    <ColorPicker
      v-model="color"
      :ui="{ root: 'grid w-full max-w-64 gap-3' }"
      aria-label="Brand color controls"
    >
      <ColorArea
        color-space="hsl"
        x-channel="hue"
        y-channel="saturation"
        :ui="areaUi"
        aria-label="Brand area"
      />
      <label class="grid gap-1 text-xs text-muted-foreground">
        Lightness
        <ColorSlider
          channel="lightness"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Lightness"
        />
      </label>
      <label class="grid gap-1 text-xs text-muted-foreground">
        Opacity
        <ColorSlider
          channel="alpha"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Opacity"
        />
      </label>
    </ColorPicker>
  </div>
</template>

#Examples

#Hue and opacity

Change hue and opacity with separate sliders. Both update the same color value.

<Dialog
  :ui="{
    overlay: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',
    header: 'flex items-center justify-between p-6 border-b',
    body: 'p-6',
    footer: 'flex justify-end gap-2 p-6 border-t',
  }"
>

#Vertical and RTL

Vertical tracks increase upward. RTL reverses horizontal pointer and arrow direction.

import './main.css'

#OKLCH and read-only

Use a smaller step for OKLCH chroma. Read-only sliders accept keyboard focus but prevent changes.

<template>
  <Accordion
    :items="items"
    type="multiple"
  />
</template>

See the live demo's code for the state and style objects used in these examples.

#Formats

Set format to choose the returned color string. It does not change which colors you can enter or which channels you edit. See supported formats. Changing the format keeps opacity and emits value-change with reason format. HEX uses eight digits for transparent colors; hexa uses eight digits for all colors.

HEX and RGB can lose colors outside sRGB. The control keeps the original color until you replace the model or enter a new value. Area and slider previews use sRGB. See precision and gamut for details.

Use a color value such as #56d799 or oklch(0.65 0.2 250). CSS variables, currentColor, and relative color expressions are not supported.

#Behavior

The slider uses a visually hidden native range input for keyboard and screen reader support. Style the visible track and thumb through ui.

For a keyboard focus ring on the thumb, set ui.axis to peer outline-none and use peer-data-[akaza-focus-visible] classes on ui.thumb. The root and axis expose data-akaza-focus-visible for keyboard focus. data-akaza-focused also includes focus from a pointer.

For a vertical slider, give the root a height and the track a width and full height.

Hue tracks stay visible for gray and transparent colors. Other channel tracks show opaque colors. The alpha track shows transparency against your background. The component positions the thumb; do not add transforms to position it.

The thumb exposes --akaza-color but does not force a background. Use ui.thumb: 'bg-white' for a white handle, or bg-[var(--akaza-color)] for a color-filled handle.

#API Reference

#Props

#Emits

#Slots

• #track: Content inside the generated gradient track. Receives value and channel.
• #thumb: Decorative thumb content. Receives value, channelValue, and percentage.

#UI Options

#Styling Hooks

Form state attributes: data-akaza-disabled, data-akaza-readonly, data-akaza-invalid, data-akaza-focused, data-akaza-touched, data-akaza-dirty, data-akaza-filled, and data-akaza-out-of-gamut. Each appears only when true.

Use class or ui.root to style the root. Use the other ui keys for inner parts. Set sizes, borders, and colors in your own styles.

#Keyboard

#Parity Notes

ColorSlider combines Reka's root, track, and thumb parts in one component. Use ui, #track, and #thumb to customize them. The supplied Base UI reference has no color slider component.