Slider

Stable

High-precision analog control tracks featuring glowing laser fill bars, responsive thumb physics, and dual-point range bounding.

Installation

$pnpm add @siberui/react

Import

tsx

import { Slider } from '@siberui/react';

Basic Usage & Live Readouts

Sliders bind directly to numerical array values and support custom min, max, and step intervals.

TRANSMITTER GAIN75 dB

tsx

<div className="flex flex-col gap-3 max-w-md w-full">
  <div className="flex items-center justify-between text-xs font-mono text-slate-300">
    <span className="text-cyan-400 font-bold">TRANSMITTER GAIN</span>
    <span className="tabular-nums">{gain[0]} dB</span>
  </div>
  <Slider value={gain} onValueChange={setGain} max={100} step={1} />
</div>

Signal & Semantic Color Halos

Select between vibrant laser fills: neon (Cyan), neonPurple, and neonGreen.

CYAN LASER FREQUENCY

VIOLET NEURAL MATRIX

EMERALD BIO-METRIC STABILIZER

tsx

<div className="flex flex-col gap-6 max-w-md w-full">
  <div className="space-y-2">
    <span className="text-xs font-mono text-cyan-400 font-bold">CYAN LASER FREQUENCY</span>
    <Slider variant="neon" defaultValue={[85]} max={100} />
  </div>

  <div className="space-y-2">
    <span className="text-xs font-mono text-purple-400 font-bold">VIOLET NEURAL MATRIX</span>
    <Slider variant="neonPurple" defaultValue={[60]} max={100} />
  </div>

  <div className="space-y-2">
    <span className="text-xs font-mono text-emerald-400 font-bold">EMERALD BIO-METRIC STABILIZER</span>
    <Slider variant="neonGreen" defaultValue={[45]} max={100} />
  </div>
</div>

Multi-Thumb Dual Range Bounding

Pass a multi-element array (e.g. [20, 80]) to create dual-point range limits for bandwidth filtering and min/max throttling.

FREQUENCY BANDWIDTH FILTER20 GHz – 80 GHz

tsx

<div className="flex flex-col gap-3 max-w-md w-full">
  <div className="flex items-center justify-between text-xs font-mono text-slate-300">
    <span className="text-cyan-400 font-bold">FREQUENCY BANDWIDTH FILTER</span>
    <span className="tabular-nums">{bandwidth[0]} GHz – {bandwidth[1]} GHz</span>
  </div>
  <Slider
    variant="neon"
    value={bandwidth}
    onValueChange={setBandwidth}
    max={100}
    step={1}
  />
</div>

Frosted Cyber-Glass Optical Tuner

Compose acrylic optical calibrators with circuit board textures and boundary laser sweeps.

OPTICAL PULSE TUNER

CALIBRATING

PULSE EMISSION POWER64%

tsx

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-6">
    <div className="flex items-center justify-between pb-4 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Activity className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">OPTICAL PULSE TUNER</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">CALIBRATING</Badge>
    </div>

    <div className="space-y-4">
      <div className="space-y-2">
        <div className="flex items-center justify-between text-xs font-mono text-slate-300">
          <span>PULSE EMISSION POWER</span>
          <span className="text-cyan-400 font-bold">{pulse[0]}%</span>
        </div>
        <Slider variant="neon" value={pulse} onValueChange={setPulse} max={100} />
      </div>
    </div>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        LOCK LASER VECTOR
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

Tactical HUD Telemetry Calibrator Mock

Multi-channel telemetry calibration array embedded into a mission command dashboard.

QUANTUM FLUX EQUALIZER

ONLINE

Calibrate core harmonics across sub-space carrier channels.

CH-01: CARRIER FREQ14.2 GHz

CH-02: HARMONIC BIAS-4.8 dB

CH-03: DAMPING FACTOR98.2%

tsx

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">QUANTUM FLUX EQUALIZER</CardTitle>
      <Badge variant="neon" size="sm">ONLINE</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Calibrate core harmonics across sub-space carrier channels.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-5">
    <div className="space-y-2">
      <div className="flex justify-between text-xs font-mono text-slate-300">
        <span>CH-01: CARRIER FREQ</span>
        <span className="text-cyan-400 font-bold">14.2 GHz</span>
      </div>
      <Slider variant="neon" defaultValue={[72]} max={100} />
    </div>

    <div className="space-y-2">
      <div className="flex justify-between text-xs font-mono text-slate-300">
        <span>CH-02: HARMONIC BIAS</span>
        <span className="text-purple-400 font-bold">-4.8 dB</span>
      </div>
      <Slider variant="neonPurple" defaultValue={[40]} max={100} />
    </div>

    <div className="space-y-2">
      <div className="flex justify-between text-xs font-mono text-slate-300">
        <span>CH-03: DAMPING FACTOR</span>
        <span className="text-emerald-400 font-bold">98.2%</span>
      </div>
      <Slider variant="neonGreen" defaultValue={[98]} max={100} />
    </div>
  </CardContent>
</Card>

API Reference

PROPERTIES (8)← swipe to inspect →

Property	Description	Type	Default
variant	Color theme and laser glow preset.	"default" \| "neon" \| "neonPurple" \| "neonGreen"	"default"
value	Controlled numerical array value representing thumb positions.	number[]	-
defaultValue	Initial numerical array value in uncontrolled mode.	number[]	-
onValueChange	Callback fired continuously as the slider thumbs are dragged.	(value: number[]) => void	-
min	The minimum permissible numerical value.	number	0
max	The maximum permissible numerical value.	number	100
step	Stepping resolution interval for thumb increments.	number	1
disabled	Disables slider interaction and dims visual feedback.	boolean	false

Accessibility

Radix Slider Primitives: Built directly on top of Radix UI Slider primitive for rock-solid WAI-ARIA slider patterns and multi-thumb focus management.
Keyboard Stepping: Use Left/Down arrow keys to decrement and Right/Up arrow keys to increment values. PageUp and PageDown perform larger step jumps.
Touch Sensitivity: Fully responsive to touch drags with zero touch jitter on mobile and tablet glass interfaces.

Best Practices

Value Displays: Always accompany sliders with a live text readout so users know the precise numerical value selected.
Step Precision: Set appropriate step increments (e.g. step={5} or step={0.1}) matching your data domain.