Slider
Component documentation for Slider.
Slider
Component documentation for Slider.
Basic Usage
Slider
Demo loads on client.
Disabled
Slider (disabled)
Demo loads on client.
Formatted Display
Slider (formatValue)
Demo loads on client.
Show Values
Slider (show value)
Demo loads on client.
Elastic Tooltip (speed + acceleration)
Slider (elastic tooltip)
Demo loads on client.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | 0 | Description for modelValue. |
min | number | 0 | Description for min. |
max | number | 100 | Description for max. |
step | number | 1 | Description for step. |
disabled | boolean | false | Description for disabled. |
showValue | boolean | false | Description for showValue. |
formatValue | (value: number) => string | - | Description for formatValue. |
showTooltip | boolean | true | Description for showTooltip. |
tooltipTrigger | 'drag' | 'hover' | 'always' | 'drag' | tooltip DisplayTriggerText |
tooltipFormatter | (value: number) => string | - | Description for tooltipFormatter. |
tooltipPlacement | 'top' | 'bottom' | 'top' | tooltip Position |
tooltipTilt | boolean | false | Description for tooltipTilt. |
tooltipTiltMaxDeg | number | 18 | Description for tooltipTiltMaxDeg. |
tooltipOffsetMaxPx | number | 28 | Description for tooltipOffsetMaxPx. |
tooltipAccelBoost | number | 0.65 | Description for tooltipAccelBoost. |
tooltipSpringStiffness | number | 320 | Description for tooltipSpringStiffness. |
tooltipSpringDamping | number | 24 | Description for tooltipSpringDamping. |
tooltipMotion | 'blur' | 'fade' | 'none' | 'blur' | tooltip Display/HiddenText |
tooltipMotionDuration | number | 160 | Description for tooltipMotionDuration. |
tooltipMotionBlurPx | number | 10 | Description for tooltipMotionBlurPx. |
tooltipDistortSkewDeg | number | 8 | Description for tooltipDistortSkewDeg. |
tooltipJelly | boolean | true | Description for tooltipJelly. |
tooltipJellyFrequency | number | 8.5 | Description for tooltipJellyFrequency. |
tooltipJellyDecay | number | 10 | Description for tooltipJellyDecay. |
tooltipJellyRotateDeg | number | 10 | Description for tooltipJellyRotateDeg. |
tooltipJellySkewDeg | number | 12 | Description for tooltipJellySkewDeg. |
tooltipJellySquash | number | 0.16 | Description for tooltipJellySquash. |
tooltipJellyTriggerAccel | number | 2800 | Description for tooltipJellyTriggerAccel. |
Events
| Event | Params | Description |
|---|---|---|
update:modelValue | number | Description for update:modelValue. |
change | number | Description for change. |
Was this helpful?