---
title: "Color Slider"
description: "A slider control for adjusting individual color channels."
canonical_url: "https://vinicunca.dev/akar/components/color-slider"
---
# Color Slider

> A slider control for adjusting individual color channels.

`````vue [index.vue]
<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>
```

```css [styles.css]
@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.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

> [!TIP]
> 
> Looking for a complete color picker? Check out the [Color Picker example](https://vinicunca.dev/examples/color-picker) that combines Color Area, Color Slider, Color Field, and Color Swatch components.

## Anatomy

Import all parts and piece them together.

```vue
<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.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](/akar/guides/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. |

**Events**

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

[ColorSliderRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSlider/ColorSliderRoot.vue)

### ColorSliderTrack

The track component that displays the color gradient background.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

[ColorSliderTrack.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSlider/ColorSliderTrack.vue)

### ColorSliderThumb

The draggable thumb component for selecting values.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `channelName` | `string` | The display name of the current channel |
| `channelValue` | `number` | The current numeric value of the channel |

[ColorSliderThumb.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSlider/ColorSliderThumb.vue)

## Examples

### Hue Slider

A horizontal hue slider in HSL color space.

```vue
<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.

```vue
<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.

```vue
<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.

```vue
<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.

```vue
<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. |

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSlider)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.