Range Dial 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 RangeDial from "./RangeDial";

export default function Example() {
  return (
    <RangeDial
      defaultValue={68}
      min={0}
      max={100}
      step={1}
      unit={"%"}
      label={"Intensity"}
      size={260}
      accentColor={"#d4baf1"}
      trackColor={"#ffffff16"}
      disabled={false}
    />
  );
}

Using Range Dial

Set min, max, step, and unit to describe the measurement being adjusted. label names the control.

Use value with onChange for form state, or defaultValue for an initial reading. size determines how much room the dial and its ticks need.

Props

Name	Type	Required	Default	Description
value	number	No	undefined	Optional controlled numeric value.
defaultValue	number	No	50	Initial value when uncontrolled.
onChange	function	No	undefined	Called with the new numeric value after pointer or keyboard input.
min	number	No	0	Minimum value.
max	number	No	100	Maximum value. Values at or below min disable interaction.
step	number	No	1	Value increment for pointer and native keyboard input.
unit	string	No	""	Suffix shown after the value.
label	string	No	""	Visible and accessible control label.
size	number	No	240	Preferred dial diameter in pixels, capped to container width.
accentColor	string	No	"#d4baf1"	Filled arc, ticks, and handle colour.
trackColor	string	No	"#ffffff16"	Unfilled arc and tick colour.
disabled	boolean	No	false	Disable pointer and keyboard input.
className	string	No	""	Additional CSS classes, merged with the component styles.
style	CSSProperties	No	undefined	Inline styles for caller-defined sizing and visual overrides.