Overview
SliderField wraps the Radix UI Slider and adds: live value tooltip, tick marks, endpoint labels, value labels at positions, color segments, range (dual-thumb) mode, and mobile-optimized touch targets. It is the form-layer slider used by the Slider DynamicBlock.
import { SliderField } from '@/ui/primitives/slider-field';Basic Slider
Default config: 0-10, step 1. The thumb is hidden until first interaction.
Current value: None (no interaction yet)
Continuous Slider
Step 0 (continuous), precision 1. Smooth movement without snapping.
Value: 50.0
With Value Display
showValue=true shows a tooltip above the thumb during interaction.
With Tick Marks
showTicks=true renders tick marks at each step interval. Range 0-5.
With Endpoint Labels
Min/max endpoint labels appear below the track.
With Value Labels
Labels at specific positions on the track.
With Unit
Unit suffix (%) and unit prefix ($) examples.
Suffix: %
Prefix: $
With Color Segments
NPS-style color zones: 0-6 destructive, 7-8 muted, 9-10 success.
Range Mode
Dual thumb for min/max selection. isRange=true with rangeValue.
Range: 25% - 75%
Disabled State
Canvas mode: visually identical but non-interactive (pointer-events-none, reduced opacity).
No Selection State
Before user interacts: thumb is hidden. Click/drag to reveal.
Mobile Touch Targets
On touch devices (pointer: coarse), thumb size increases from 20x20px to 28x28px via the coarse: Tailwind variant. This ensures comfortable tap targets on mobile without affecting desktop precision.