← DOCS
cyber

CyberSlider

Neon range slider with value display.

npx chaos add cyber-slider

PREVIEW

USAGE

import { CyberSlider } from '@/components/chaos/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