Slider

Name: Aki UI
Author: Duy (DuyDev)

A component for selecting a value from a range with customizable appearance and behavior.

Import

import { Slider } from '@akitectio/aki-ui'

Value: 50

const [value, setValue] = useState(50)

<Slider 
  value={value} 
  onChange={setValue}
  min={0}
  max={100}
/>

Range: 20 - 80

const [rangeValue, setRangeValue] = useState([20, 80])

<Slider 
  value={rangeValue} 
  onChange={setRangeValue}
  min={0}
  max={100}
  range
/>

Step 10

Step 25

<Slider 
  defaultValue={30} 
  min={0}
  max={100}
  step={10}
/>

<Slider 
  defaultValue={50} 
  min={0}
  max={100}
  step={25}
/>

Prop	Type	Default	Description
value	number \| number[]	-	Current value(s) of the slider
defaultValue	number \| number[]	0	Default value(s) of the slider
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step size for value increments
range	boolean	false	Enable range selection
disabled	boolean	false	Disable the slider
onChange	(value) => void	-	Callback when value changes