57 lines
1.6 KiB
Markdown
57 lines
1.6 KiB
Markdown
|
---
|
||
|
|
title: ChannelSlider
|
||
|
|
description: Accessible scalar channel slider for OkHCL controls.
|
||
|
|
---
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import ColorFillDemo from '#vue/primitives/Fill/demo/ColorFillDemo.vue'
|
||
|
|
import { data } from './channel-slider.data'
|
||
|
|
</script>
|
||
|
|
|
||
|
|
# ChannelSlider
|
||
|
|
|
||
|
|
`ChannelSlider` provides the same Root/Track/Thumb composition and keyboard behavior as Reka's
|
||
|
|
Slider while accepting an arbitrary scalar channel. OpenPencil uses it only for OkHCL channels;
|
||
|
|
standard RGB, HSL, and HSB controls should use Reka `ColorSlider` directly.
|
||
|
|
|
||
|
|
<ColorFillDemo />
|
||
|
|
|
||
|
|
## Anatomy
|
||
|
|
|
||
|
|
- `ChannelSliderRoot` — controlled value, range, step, orientation, and accessible channel label
|
||
|
|
- `ChannelSliderTrack` — polymorphic track element
|
||
|
|
- `ChannelSliderThumb` — slider thumb with range ARIA and formatted value text
|
||
|
|
|
||
|
|
Arrow keys step the value. Page Up and Page Down use larger steps, while Home and End move to the
|
||
|
|
range boundaries. The primitive is temporary until [Reka issue #2798](https://github.com/unovue/reka-ui/issues/2798)
|
||
|
|
provides first-class OkHCL support.
|
||
|
|
|
||
|
|
```vue twoslash
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import {
|
||
|
|
ChannelSliderRoot,
|
||
|
|
ChannelSliderThumb,
|
||
|
|
ChannelSliderTrack
|
||
|
|
} from '@open-pencil/vue'
|
||
|
|
|
||
|
|
const chroma = ref(0.16)
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<ChannelSliderRoot v-model="chroma" label="Chroma" :min="0" :max="0.4" :step="0.001">
|
||
|
|
<ChannelSliderTrack />
|
||
|
|
<ChannelSliderThumb />
|
||
|
|
</ChannelSliderRoot>
|
||
|
|
</template>
|
||
|
|
```
|
||
|
|
|
||
|
|
## Generated API reference
|
||
|
|
|
||
|
|
<SdkComponentAPI :components="data.components" />
|
||
|
|
|
||
|
|
## Related APIs
|
||
|
|
|
||
|
|
- [useColorModel](../composables/use-color-model)
|
||
|
|
- [FillRoot](./fill-root)
|