Reka UI logoReka
backdrop
Examples
Components

Color Slider

Alpha
A slider component for adjusting individual color channels. Supports all color channels including hue, saturation, lightness, brightness, red, green, blue, and alpha with automatic gradient backgrounds.
#56d799

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.

sh
$ npm add reka-ui
tip

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.

vue
<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'reka-ui'
</script>

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

API Reference

ColorSliderRoot

The root component that provides the slider functionality and context.

PropDefaultType
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.

EmitPayload
change
[value: string]
changeEnd
[value: string]
update:color
[value: Color]
update:modelValue
[value: string | Color]

Event handler called when the value of the checkbox changes.

ColorSliderTrack

The track component that displays the color gradient background.

PropDefaultType
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.

ColorSliderThumb

The draggable thumb component for selecting values.

PropDefaultType
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.

Slots (default)Payload
channelName
string

The display name of the current channel

channelValue
number

The current numeric value of the channel

Examples

Hue Slider

A horizontal hue slider in HSL color space.

vue
<script setup>
import {
  ColorSliderRoot,
  ColorSliderThumb,
  ColorSliderTrack,
} from 'reka-ui'
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 'reka-ui'
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 'reka-ui'
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 'reka-ui'
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 'reka-ui'
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

KeyDescription
ArrowLeftDecreases the value in horizontal orientation.
ArrowRightIncreases the value in horizontal orientation.
ArrowUpIncreases the value in vertical orientation.
ArrowDownDecreases the value in vertical orientation.
PageUpIncreases the value by a larger step.
PageDownDecreases the value by a larger step.
HomeSets the value to minimum.
EndSets the value to maximum.