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.

Fill swatches

Fill state

OkHCL channel

16%

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 provides first-class OkHCL support.

<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

ChannelSliderRoot

Generated from packages/vue/src/primitives/ChannelSlider/ChannelSliderRoot.vue

Props

Prop	Default	Type
modelValue* Controlled channel value.	—	number
label* Accessible channel name announced by the thumb.	—	string
min Minimum channel value.	0	number | undefined
max Maximum channel value.	100	number | undefined
step Channel increment.	1	number | undefined
orientation Slider orientation.	"horizontal"	ChannelSliderOrientation | undefined
disabled Prevents pointer and keyboard interaction.	false	boolean | undefined
inverted Reverses the visual direction of the slider.	false	boolean | undefined
formatValueText Formats the value announced by assistive technology.	String	((value: number) => string) | undefined
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"span"	AsTag | Component | undefined

Events

Event	Payload	Description
update:modelValue	[value: number]
valueCommit	[value: number]

Slots

Slot	Props	Description
default	ChannelSliderRootSlotProps

ChannelSliderTrack

Generated from packages/vue/src/primitives/ChannelSlider/ChannelSliderTrack.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"span"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	{}

ChannelSliderThumb

Generated from packages/vue/src/primitives/ChannelSlider/ChannelSliderThumb.vue

Props

Prop	Default	Type
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.	false	boolean | undefined
as The element or component this component should render as. Can be overwritten by `asChild`.	"span"	AsTag | Component | undefined

Slots

Slot	Props	Description
default	ChannelSliderThumbSlotProps

Related APIs

• useColorModel
• FillRoot