← DOCS
cyber

CyberSlider

Neon range slider with value display.

npx chaos add cyber-slider

PREVIEW

USAGE

case 'glass-button': return ; case 'neon-glow': return ; case 'floating-button': return ;
import { CyberSlider } from '@oalacea/chaosui/cyber/cyber-slider';

<CyberSlider value={50} onChange={setValue} />
<CyberSlider value={vol} onChange={setVol} showValue variant="pink" />

PROPS

PropTypeDefault
valueCurrent value
number-
onChangeChange callback
(value: number) => void-
minMinimum value
number0
maxMaximum value
number100
stepStep increment
number1
variantNeon color
"cyan" | "pink" | "green" | "purple""cyan"
showValueShow current value
booleanfalse