Color Slider

A slider control for adjusting individual color channels.

Alpha

#56d799

<script setup lang="ts">
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'akar';
import { ref } from 'vue';
import './styles.css';

const color = ref('#56d799');
</script>

<template>
  <div class="akar-demo akar-demo-ColorSlider">
    <div class="ColorSliderDemo">
      <ColorSliderRoot
        v-model="color"
        channel="hue"
        class="ColorSliderRoot"
      >
        <ColorSliderTrack class="ColorSliderTrack">
          <div class="ColorSliderTrackFill" />
        </ColorSliderTrack>
        <ColorSliderThumb class="ColorSliderThumb" />
      </ColorSliderRoot>

      <div class="ColorSliderValue">
        <div
          class="ColorSliderSwatch"
          :style="{ background: color }"
        />
        <span class="ColorSliderCode">{{ color }}</span>
      </div>
    </div>
  </div>
</template>

@import '../_colors/black-alpha.css';
@import '../_colors/grass.css';
@import '../_colors/mauve.css';

@scope (.akar-demo-ColorSlider) {
  .ColorSliderDemo {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .ColorSliderRoot {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
    height: 20px;
    touch-action: none;
    user-select: none;
  }

  .ColorSliderTrack {
    position: relative;
    flex: 1;
    height: 12px;
    border-radius: 9999px;
  }

  .ColorSliderTrackFill {
    position: absolute;
    inset: 0;
    border-radius: 9999px;
  }

  .ColorSliderThumb {
    display: block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    background-color: white;
    border: 2px solid var(--mauve-8);
    border-radius: 9999px;
    box-shadow: 0 2px 10px var(--black-a7);
    transition: transform 150ms;
  }

  .ColorSliderThumb:hover {
    transform: scale(1.1);
  }

  .ColorSliderThumb:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--grass-7);
  }

  .ColorSliderValue {
    display: flex;
    gap: 8px;
    align-items: center;
    color: var(--mauve-11);
    font-size: 12px;
  }

  .ColorSliderSwatch {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1px solid var(--mauve-6);
    border-radius: 4px;
  }

  .ColorSliderCode {
    font-family: monospace;
  }
}

Features

Supports all color channels (hue, saturation, lightness, brightness, red, green, blue, alpha).
Automatic gradient background based on current color.
Horizontal and vertical orientations.
Full keyboard navigation support.
Configurable step values.
Preserves color precision during drag operations.
Form integration with hidden inputs.
Support for HSL, HSB, and RGB color spaces.

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Looking for a complete color picker? Check out the Color Picker example that combines Color Area, Color Slider, Color Field, and Color Swatch components.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'akar';
</script>

<template>
  <ColorSliderRoot channel="hue">
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>

API Reference

ColorSliderRoot

The root component that provides the slider functionality and context.

Prop	Default	Type
`as`	`"span"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`channel*`		`"hue" \| "saturation" \| "red" \| "green" \| "blue" \| "alpha" \| "lightness" \| "brightness"` The color channel that this slider manipulates.
`colorSpace`	`"hsl"`	`"hsl" \| "rgb" \| "hsb"` The color space to operate in.
`defaultValue`	`"#000000"`	`string \| Color` The default color value (uncontrolled).
`dir`		`"ltr" \| "rtl"` The reading direction of the slider.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the slider.
`inverted`	`false`	`boolean` Whether the slider is visually inverted.
`modelValue`		`string \| Color` The color value (controlled). Can be a hex string or Color object.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`orientation`	`"horizontal"`	`"vertical" \| "horizontal"` The orientation of the slider.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`step`		`number` Custom step value for increment/decrement. Defaults to the channel's natural step.

Event	Payload
`change`	`value: string`
`changeEnd`	`value: string`
`update:color`	`value: Color`
`update:modelValue`	`value: string \| Color`

ColorSliderRoot.vue source

ColorSliderTrack

The track component that displays the color gradient background.

Prop	Default	Type
`as`	`"span"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

ColorSliderTrack.vue source

ColorSliderThumb

The draggable thumb component for selecting values.

Prop	Default	Type
`as`	`"span"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Slot (default)	Payload
`channelName`	`string` The display name of the current channel
`channelValue`	`number` The current numeric value of the channel

ColorSliderThumb.vue source

Examples

Hue Slider

A horizontal hue slider in HSL color space.

<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'akar';
import { ref } from 'vue';

const color = ref('#3b82f6');
</script>

<template>
  <ColorSliderRoot
    v-model="color"
    channel="hue"
    color-space="hsl"
  >
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>

Alpha Channel

Slider for adjusting the alpha (opacity) channel.

<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'akar';
import { ref } from 'vue';

const color = ref('#3b82f6');
</script>

<template>
  <ColorSliderRoot
    v-model="color"
    channel="alpha"
  >
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>

Vertical Orientation

A vertical slider for space-constrained layouts.

<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'akar';
import { ref } from 'vue';

const color = ref('#3b82f6');
</script>

<template>
  <ColorSliderRoot
    v-model="color"
    channel="lightness"
    orientation="vertical"
    class="h-[200px]"
  >
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>

RGB Channel Sliders

Sliders for individual RGB channels.

<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'akar';
import { ref } from 'vue';

const color = ref('#3b82f6');
</script>

<template>
  <div class="flex flex-col gap-4">
    <ColorSliderRoot
      v-model="color"
      channel="red"
      color-space="rgb"
    >
      <ColorSliderTrack />
      <ColorSliderThumb />
    </ColorSliderRoot>

    <ColorSliderRoot
      v-model="color"
      channel="green"
      color-space="rgb"
    >
      <ColorSliderTrack />
      <ColorSliderThumb />
    </ColorSliderRoot>

    <ColorSliderRoot
      v-model="color"
      channel="blue"
      color-space="rgb"
    >
      <ColorSliderTrack />
      <ColorSliderThumb />
    </ColorSliderRoot>
  </div>
</template>

Custom Step Value

Use a custom step increment for finer or coarser control.

<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'akar';
import { ref } from 'vue';

const color = ref('#3b82f6');
</script>

<template>
  <ColorSliderRoot
    v-model="color"
    channel="hue"
    :step="5"
  >
    <ColorSliderTrack />
    <ColorSliderThumb />
  </ColorSliderRoot>
</template>

Accessibility

Keyboard Interactions

Key	Description
`ArrowLeft`	Decreases the value in horizontal orientation.
`ArrowRight`	Increases the value in horizontal orientation.
`ArrowUp`	Increases the value in vertical orientation.
`ArrowDown`	Decreases the value in vertical orientation.
`PageUp`	Increases the value by a larger step.
`PageDown`	Decreases the value by a larger step.
`Home`	Sets the value to minimum.
`End`	Sets the value to maximum.

Color Field

An input field for entering and editing color values in various formats.

Color Swatch

A predefined color block that allows users to quickly select commonly used or brand-specific colors.