Slider

A native-feeling range input with fully accessible keyboard support.

import { Slider, T } from '@kaynora/ui'

export default function () {
  return (
    <Slider
      name='volume'
      minValue={0}
      maxValue={100}
      defaultValue={50}
    >
      <T>Volume</T>
    </Slider>
  )
}

Use value and onChange to control the slider externally.

import { Slider, T } from '@kaynora/ui'
import { useState } from 'react'

export default function () {
  const [v, setV] = useState(50)
  return (
    <Slider
      name='controlled'
      minValue={0}
      maxValue={100}
      value={value}
      onChange={setValue}
    >
      <T>Value: {value}</T>
    </Slider>
  )
}

The step prop determines the level of granularity.

import { Slider } from '@kaynora/ui'

export default function () {
  return (
    <Slider
      name='step'
      minValue={0}
      maxValue={100}
      step={10}
      defaultValue={20}
    >
      <T>Step 10</T>
    </Slider>
  )
}

<Slider />
PropTypeDefault
children
ReactElement | ReactElement[]
—
name
string
—
minValue
number
—
maxValue
number
—
step
number
1
value
number
undefined
defaultValue
number
minValue
onChange
(value: number) => void
undefined
disabled
boolean
false
internal
{
  root: HTMLDivElementProps
  content: HTMLDivElementProps
  clickbox: HTMLDivElementProps
}
undefined