Skip to main content

​
Overview

A dynamic balance slider component featuring adjustable colors, customizable limits, and an interactive tooltip. Perfect for creating intuitive balance controls with visual feedback.

​
Usage

<template>
  <BalanceSlider
    :initialValue="50"
    leftColor="#e68a00"
    rightColor="#ffffff"
    :minShiftLimit="40"
    :maxShiftLimit="68"
    leftContent="LEFT"
    rightContent="RIGHT"
    indicatorColor="#FFFFFF"
  />
</template>

​
Props

Prop NameTypeDefaultDescription
initialValuenumber50Initial position of the slider (0-100).
leftColorstring"#e68a00"Background color for the left side of the slider.
rightColorstring"#ffffff"Background color for the right side of the slider.
minShiftLimitnumber40Minimum limit where shifting animation activates.
maxShiftLimitnumber68Maximum limit where shifting animation deactivates.
leftContentstring"LEFT"Text displayed in the tooltip for the left side.
rightContentstring"RIGHT"Text displayed in the tooltip for the right side.
indicatorColorstring"#FFFFFF"Color of the central indicator on the slider.

​
Credits

Build docs developers (and LLMs) love

Get started for freeTalk to us