Balance Slider

A dynamic balance slider with adjustable colors, limits, and interactive tooltip.

通过 CLI 安装

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://registry.inspira-ui.com/balance-slider.json"

复制并粘贴以下代码：

BalanceSlider.vue

Prop 名称	类型	默认值	描述
`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.

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.

Inspired and ported from code shared in Jhey's CSS only version of Balance Slider
Original concept by Malay Vasa.

本页