HSL Sliders

Slider controls for the hue, saturation, and lightness color channels.

Code

Usage

Vue

import { HueSlider, SaturationSlider, LightnessSlider } from '@hueycolor/vue'

<script setup>
import { ref } from 'vue'
import { HueyRoot, HueSlider, SaturationSlider, LightnessSlider, hueyColor } from '@hueycolor/vue'

const color = ref(hueyColor('#1A3263'))
</script>

<template>
  <HueyRoot v-model="color">
    <HueSlider />
    <SaturationSlider />
    <LightnessSlider />
  </HueyRoot>
</template>

Svelte

import { HueSlider, SaturationSlider, LightnessSlider } from '@hueycolor/svelte'

<script>
import { HueyRoot, HueSlider, SaturationSlider, LightnessSlider, hueyColor } from '@hueycolor/svelte'

let color = $state(hueyColor('#1A3263'))
</script>

<HueyRoot bind:color>
  <HueSlider />
  <SaturationSlider />
  <LightnessSlider />
</HueyRoot>

Props

Each slider component shares these props:

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	The orientation of the slider track.
aria-label	string	—	Accessible label for the slider.

Value Ranges

• HueSlider: 0-360 degrees
• SaturationSlider: 0-100%
• LightnessSlider: 0-100%

Styling

Each slider’s track is [huey-slider-track] plus a role-specific selector:

• [huey-slider="hue"] - HueSlider
• [huey-slider="saturation"] - SaturationSlider
• [huey-slider="lightness"] - LightnessSlider

Target the thumb of a specific slider with [huey-slider="hue"] [huey-slider-thumb] (substitute the role). Use [aria-orientation="vertical"] to style the vertical orientation.

Property	Default	Description
--huey-slider-track-height	16px	Track height (or width when vertical)
--huey-slider-track-width	129px	Track width (or height when vertical)
--huey-thumb-size	var(--huey-slider-track-height, 16px)	Size of the thumb

All three ship a track background that updates with the current color, and the thumb color is driven dynamically via --huey-thumb-color.