Balance Slider
A dynamic balance slider with adjustable colors, limits, and interactive tooltip.
API
| Prop Name | Type | Default | Description |
|---|---|---|---|
initialValue | number | 50 | Initial position of the slider (0-100). |
leftColor | string | "#e68a00" | Background color for the left side of the slider. |
rightColor | string | "#ffffff" | Background color for the right side of the slider. |
minShiftLimit | number | 40 | Minimum limit where shifting animation activates. |
maxShiftLimit | number | 68 | Maximum limit where shifting animation deactivates. |
leftContent | string | "LEFT" | Text displayed in the tooltip for the left side. |
rightContent | string | "RIGHT" | Text displayed in the tooltip for the right side. |
indicatorColor | string | "#FFFFFF" | Color of the central indicator on the slider. |
Component Code
You can copy and paste the following code to create this component:
BalanceSlider.vue
Features
- Dual-Sided Color Control: Customize the left and right side colors of the slider to create a distinct balance effect.
- Interactive Tooltip: Displays real-time percentage values for both sides, with customizable content for left and right labels.
- Shift Animation: Activates a shifting effect within defined limits, adding an engaging visual element.
- Responsive Indicator: Central indicator adjusts its color based on active state, enhancing interactivity.
- Accessible Controls: Works with keyboard and touch interactions for seamless accessibility.
Credits
- Inspired and ported from code shared in Jhey's CSS only version of Balance Slider
- Original concept by Malay Vasa.