Slider
Range input with value display and optional elastic tooltip feedback.
Slider
Range input with value display and optional elastic tooltip feedback.
Basic Usage
Slider
Interactive preview paused.
Disabled
Slider (disabled)
Interactive preview paused.
Formatted Display
Slider (formatValue)
Interactive preview paused.
Show Values
Slider (show value)
Interactive preview paused.
Elastic Tooltip (speed + acceleration)
Slider (elastic tooltip)
Interactive preview paused.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | 0 | Current slider value. The rendered input clamps it to the min..max range. |
min | number | 0 | Minimum range value forwarded to the native range input. |
max | number | 100 | Maximum range value forwarded to the native range input. |
step | number | 1 | Step size forwarded to the native range input. |
disabled | boolean | false | Disables the native range input and suppresses tooltip display. |
showValue | boolean | false | Renders the formatted current value beside the slider. |
formatValue | (value: number) => string | - | Formats the visible side value; also feeds tooltip text when tooltipFormatter is absent. |
showTooltip | boolean | true | Enables tooltip rendering when the trigger condition is met. |
tooltipTrigger | 'drag' | 'hover' | 'always' | 'drag' | Controls when the tooltip is visible: while dragging, on hover/drag, or always. |
tooltipFormatter | (value: number) => string | - | Formats tooltip text independently from formatValue. |
tooltipPlacement | 'top' | 'bottom' | 'top' | Places the tooltip above or below the thumb. |
tooltipTilt | boolean | false | Enables velocity-based tooltip follow, tilt, offset, squash, and skew motion. |
tooltipTiltMaxDeg | number | 18 | Maximum tilt angle used by the velocity response. |
tooltipOffsetMaxPx | number | 28 | Maximum horizontal tooltip offset used by the velocity response. |
tooltipAccelBoost | number | 0.65 | Multiplier for acceleration contribution when calculating elastic tooltip intensity. |
tooltipSpringStiffness | number | 320 | Spring stiffness for tooltip follow, offset, and tilt interpolation. |
tooltipSpringDamping | number | 24 | Spring damping for tooltip follow, offset, and tilt interpolation. |
tooltipMotion | 'blur' | 'fade' | 'none' | 'blur' | Tooltip enter/leave motion. none renders without the transition wrapper. |
tooltipMotionDuration | number | 160 | Tooltip enter/leave duration in ms; negative values are clamped to 0ms. |
tooltipMotionBlurPx | number | 10 | Blur radius for the blur tooltip motion; negative values are clamped to 0px. |
tooltipDistortSkewDeg | number | 8 | Maximum skew used by tooltip distortion while moving. |
tooltipJelly | boolean | true | Enables acceleration-triggered wobble on top of the tilt motion. |
tooltipJellyFrequency | number | 8.5 | Wobble frequency in hertz. |
tooltipJellyDecay | number | 10 | Wobble decay rate; larger values settle faster. |
tooltipJellyRotateDeg | number | 10 | Maximum wobble rotation contribution. |
tooltipJellySkewDeg | number | 12 | Maximum wobble skew contribution. |
tooltipJellySquash | number | 0.16 | Maximum wobble squash contribution. |
tooltipJellyTriggerAccel | number | 2800 | Acceleration threshold used to kick jelly wobble. |
Events
| Event | Params | Description |
|---|---|---|
update:modelValue | number | Emitted on native input with the next clamped value. |
change | number | Emitted on native change with the input's current numeric value. |
Interaction Contract
- The rendered native range input clamps
modelValueinto themin..maxrange. - Native
inputemitsupdate:modelValuewith the clamped value; nativechangeemitschange. disabledblocks value updates and suppresses tooltip rendering.formatValuecontrols the visible side value and is also used for tooltip text whentooltipFormatteris absent.- Tooltip visibility follows
tooltipTrigger:drag,hover, oralways;showTooltip=falsedisables it. - Negative
tooltipMotionDurationandtooltipMotionBlurPxvalues are clamped to0msand0px. - Global pointer listeners are cleaned up on unmount.