Slider UI

A Slider UI color component to select a color.

<script setup lang="ts">
import {
  SliderUiRoot,
  SliderUiSliderColorRoot,
  SliderUiSliderColorThumb,
  SliderUiSwatchRoot,
  SliderUiSwatchItem
} from "color-ui-vue";
import { ref } from "vue";

const color = ref({ r: 49, g: 168, b: 94, a: 1 });
</script>

<template>
  <div class="flex flex-col items-center gap-y-4">
    <div class="h-10 w-10 rounded-lg p-1 border bg-background">
      <span
        class="h-full w-full block rounded-md"
        :style="`background-color: rgb(${color.r},${color.g},${color.b})`"
      />
    </div>
    <!-- START / SliderUiRoot -->
    <SliderUiRoot
      v-model="color"
      class="flex flex-col w-80 md:w-96 gap-y-4 px-4 py-4 rounded-lg border bg-background"
    >
      <SliderUiSliderColorRoot
        class="relative flex touch-none select-none items-center justify-center rounded-full h-3 w-full"
      >
        <SliderUiSliderColorThumb
          class="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
        />
      </SliderUiSliderColorRoot>
      <SliderUiSwatchRoot class="w-full flex gap-x-2">
        <SliderUiSwatchItem
          class="h-4 w-full last:rounded-r-lg first:rounded-l-lg transition-[width,transform] hover:scale-110"
        />
      </SliderUiSwatchRoot>
    </SliderUiRoot>
    <!-- END / SliderUiRoot -->
  </div>
</template>

<style scoped></style>

export default {
  content: ["./*.{ts,tsx,vue}"],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
          hover: "hsl(var(--primary-hover))",
          active: "hsl(var(--primary-active))"
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))"
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))"
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))"
        }
      },
      borderRadius: {
        xl: "calc(var(--radius) + 4px)",
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)"
      }
    }
  }
};

Installation

Install the component from your command line.

$ npm add color-ui-vue

Anatomy

Import all parts and piece them together.

<script setup lang="ts">
import {
  SliderUiRoot,
  SliderUiSliderColorRoot,
  SliderUiSliderColorThumb,
  SliderUiSwatchRoot,
  SliderUiSwatchItem
} from "color-ui-vue";
</script>

<template>
  <SliderUiRoot>
    <SliderUiSliderColorRoot>
      <SliderUiSliderColorThumb />
    </SliderUiSliderColorRoot>

    <SliderUiSwatchRoot>
      <SliderUiSwatchItem />
    </SliderUiSwatchRoot>
  </SliderUiRoot>
</template>

API Reference

Root

The base part of the Slider UI.

<SliderUiRoot>
  <!-- Parts go here -->
</SliderUiRoot>

Prop	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild	-	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Radix-vue composition guide for more details.
modelValue	{ r: 255, g: 0, b: 0 }	RGB | HSL | HEX The model value of the color slider. Check useFormatColor for type declarations.
orientation	-	horizontal | vertical The orientation of the slider component.
dir	ltr	ltr | rtl The reading direction of Color Ui when applicable. If omitted assumes LTR (left-to-right) reading mode.
acceptedMode	rgb	hsl | rgb | hex The accepted color mode.
colorFormat	rgb	rgb | hsl | hex Format modelValue. If alpha is true, the default value is rgba otherwise rgb
defaultValue	{ r: 255, g: 0, b: 0 }	RGB | HSL | HEX The default value of the color slider. Check useConvertColor for type declarations.
swatches	[80, 65, 50, 35, 20]	number[] Array of lightness values for the swatches. Note the number of swatches is determined by the length of this array. Max value number is 100 and min value number is 0.
defaultSaturation	50	number The default saturation..

Emit	Payload
update:modelValue	[value: RGB | HSL | HEX] Event handler called when the color selected change

Slider Color

The slider to select the color.

<SliderUiSwatchRoot>
  <SliderUiSliderColorThumb />
</SliderUiSwatchRoot>

Root

The base of the color slider.

Prop	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild	-	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Radix-vue composition guide for more details.
orientation	horizontal	horizontal | vertical The orientation of the slider.
disabled	-	boolean When true, prevents the user from interacting with the slider.

Thumb

The thumb of the slider. Need to be placed inside the SliderColorRoot.

Prop	Default	Type
as	'span'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild	-	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Radix-vue composition guide for more details.

Keyboard Interactions

Key	Description
ArrowRight	Increments/decrements by the step value depending on orientation.
ArrowLeft	Increments/decrements by the step value depending on orientation.
ArrowUp	Increases the value by the step amount.
ArrowDown	Decreases the value by the step amount.
PageUp	Increases the value by a larger step.
PageDown	Decreases the value by a larger step.
Shift + ArrowUp	Increases the value by a larger step.
Shift + ArrowDown	Decreases the value by a larger step.
Home	Sets the value to its minimum.
End	Sets the value to its maximum.

Swatch

The swatch list to select the color.

<PickerUiSliderAlphaRoot>
  <SliderUiSwatchItem />
</PickerUiSliderAlphaRoot>

Root

The base of the swatch.

Prop	Default	Type
as	'div'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild	-	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Radix-vue composition guide for more details.
orientation	horizontal	horizontal | vertical The orientation of the swatch list.
disabled	-	boolean When true, prevents the user from interacting with the swatch list.

Item

Items inside swatch. Need to be placed inside the SwatchRoot.

Prop	Default	Type
as	'span'	AsTag | Component The element or component this component should render as. Can be overwrite by asChild
asChild	-	boolean Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Radix-vue composition guide for more details.