Slider

Range input with optional label and live value display.

With label and value

Threshold40

import { useState } from 'react'
import { Slider } from '@canarist/ui'

function Example() {
  const [value, setValue] = useState(40)
  return (
    <Slider
      label="Threshold"
      value={value}
      onChange={setValue}
      showValue
      min={0}
      max={100}
    />
  )
}

Reference

Prop	Type	Default	Description
value	number	—	Current value (controlled).
onChange	(value: number) => void	—	Called with the new numeric value on every change.
label	string	—	Label shown above the slider.
min	number	0	Minimum value.
max	number	100	Maximum value.
step	number	1	Increment step.
showValue	boolean	—	Show the current value to the right of the label.
error	string	—	Error message shown below the slider.