HslColorSliders

A <Slider> and <Input> per channel to choose an HSL color value

Code

<script lang="ts">
  import { HslColorSliders } from '@geoffcox/sterling-svelte';
</script>

<HslColorSliders />

Members

Property Name	Type	Default	Comment
hue	number	180	The hue value.
saturation	number	100	The saturation value.
lightness	number	50	The lightness value.
alpha	number	1	The alpha value.
variant	string	''	Additional class names to apply

Considerations

Includes HTMLDivElement props, event, and methods

Anatomy

<div class="sterling-hsl-color-sliders">
  <Slider variant="hue" />
  <Input variant="hue" />
  <Slider variant="saturation" />
  <Input variant="saturation" />
  <Slider variant="lightness" />
  <Input variant="lightness" />
  <div class="alpha-hatch" />
  <div class="alpha-gradient" />
  <Slider variant="alpha" />
  <Input variant="alpha" />
</div>