Balance Slider React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import BalanceSlider from "./BalanceSlider";

export default function Example() {
  return (
    <BalanceSlider
      defaultValue={65}
      min={0}
      max={100}
      step={1}
      label={"Balance"}
      color={"#ddba80"}
      showValue={true}
      disabled={false}
    />
  );
}

Using Balance Slider

Use min, max and step to define the range and onValueChange to receive updates. The native range input supports pointer dragging, touch and keyboard adjustments.

Pass value for controlled use or defaultValue for local state. Use formatValue to add a unit to the displayed value, and name to include the value in form submission.

Props

Name	Type	Required	Default	Description
value	number	No	undefined	Controlled numeric value.
defaultValue	number	No	50	Initial uncontrolled value.
onValueChange	function	No	undefined	Receives the numeric slider value.
min	number	No	0	Minimum value.
max	number	No	100	Maximum value.
step	number	No	1	Native range input step size.
label	string	No	"Balance"	Visible and accessible input label.
color	string	No	"#ddba80"	Metal and slider colour.
disabled	boolean	No	false	Disable the native range input.
showValue	boolean	No	true	Show the current numeric value.
formatValue	function	No	undefined	Formats the displayed value without changing the numeric input.
name	string	No	undefined	Form field name.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.