Slider

A Slider is role="slider" with the keys the ARIA Authoring Practices list: the arrows step, Page Up and Page Down take big steps, and Home and End go to the ends. A drag keeps going past the end of the track. The thumb is 24 by 24, as WCAG 2.5.8 asks, and the whole row is the target.

Volume: 40

SliderDemo.tsx

import { Text, View } from '@hozo/core'
import { Slider } from '@hozo/ui'
import { useState } from 'react'

export function SliderDemo() {
  const [volume, setVolume] = useState(40)
  return (
    <View className="w-full max-w-sm gap-3">
      <Slider
        accessibilityLabel="Volume"
        value={volume}
        onValueChange={setVolume}
        valueText={(level) => `${level} percent`}
      />
      <Text className="text-sm text-hozo-text-muted">Volume: {volume}</Text>
    </View>
  )
}

• value and onValueChange, or defaultValue. onValueCommit is called once, when a drag or a key press ends.
• min, max, step and bigStep: 0 to 100 in steps of 1 by default.
• valueText: what a screen reader says for a value. Above, it says “40 percent” rather than “40”.
• accessibilityLabel, disabled and orientation. className reaches the track, for a width or a margin.