Alpha Slider

A slider control for adjusting the alpha (opacity) channel.

Code

Usage

Vue

import { AlphaSlider } from '@hueycolor/vue'

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

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

<template>
  <HueyRoot v-model="color">
    <AlphaSlider />
  </HueyRoot>
</template>

Svelte

import { AlphaSlider } from '@hueycolor/svelte'

<script>
import { HueyRoot, AlphaSlider, hueyColor } from '@hueycolor/svelte'

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

<HueyRoot bind:color>
  <AlphaSlider />
</HueyRoot>

Props

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