ColorPicker Sliders Edition

For granular control, the library provides individual slider components for each color channel. These primitives — such as ColorPickerSliderRed, ColorPickerSliderGreen, ColorPickerSliderBlue, and ColorPickerSliderAlpha — can be combined to build completely custom interfaces.

ColorPicker RGB Sliders

R

G

B

%

ColorPickerSlidersRGB.vue

<script lang="ts" setup>
import { useForwardPropsEmits } from 'reka-ui'
import {
  ColorPickerRoot,
  ColorPickerInputRGB,
  ColorPickerSliderRed,
  ColorPickerSliderGreen,
  ColorPickerSliderBlue,
  ColorPickerSliderAlpha,
  type ColorPickerRootProps,
  type ColorPickerRootEmits
} from '@vuelor/picker'

type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>

const props = defineProps<ColorPickerProps>()
const emits = defineEmits<ColorPickerRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ColorPickerRoot
    class="p-3 pl-2"
    :ui="{ shared: { thumb: 'border-2' } }"
    v-bind="forwarded"
  >
    <div class="flex gap-2">
      <ColorPickerInputRGB
        :ui="{
          group: 'flex-col w-12',
          item: 'bg-transparent last:flex-row-reverse',
          label: 'w-5'
        }"
      />
      <div class="flex flex-col justify-around flex-1">
        <ColorPickerSliderRed />
        <ColorPickerSliderGreen />
        <ColorPickerSliderBlue />
        <ColorPickerSliderAlpha />
      </div>
    </div>
  </ColorPickerRoot>
</template>

ColorPicker HSL Sliders

For applications that prioritize the HSL color model, you can utilize dedicated primitives to construct a complete HSL interface. By combining ColorPickerSliderHue, ColorPickerSliderSaturation, and ColorPickerSliderLightness, you provide users with intuitive control over color tone and intensity. This setup is ideal for design-focused tools where adjusting saturation or lightness independently is a key requirement.

H

S

L

%

ColorPickerSlidersHSL.vue

<script lang="ts" setup>
import { useForwardPropsEmits } from 'reka-ui'
import {
  ColorPickerRoot,
  ColorPickerInputHSL,
  ColorPickerSliderHue,
  ColorPickerSliderSaturation,
  ColorPickerSliderLightness,
  ColorPickerSliderAlpha,
  type ColorPickerRootProps,
  type ColorPickerRootEmits
} from '@vuelor/picker'

type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>

const props = defineProps<ColorPickerProps>()
const emits = defineEmits<ColorPickerRootEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <ColorPickerRoot
    class="p-3"
    :ui="{ shared: { thumb: 'border-2' } }"
    v-bind="forwarded"
  >
    <ColorPickerSliderHue />
    <ColorPickerSliderSaturation />
    <ColorPickerSliderLightness />
    <ColorPickerSliderAlpha />
    <ColorPickerInputHSL :ui="{ item: 'bg-transparent' }" />
  </ColorPickerRoot>
</template>