Circular Stepper Input

10200

Installation

Props

Prop	Type	Default	Description
`min`	`number`	`0`	Minimum allowed value
`max`	`number`	`100`	Maximum allowed value
`step`	`number`	`1`	Step increment/decrement value
`defaultValue`	`number`	`50`	Initial value
`size`	`number`	`120`	Diameter of the circle in pixels
`onChange`	`(value: number) => void`	-	Callback when value changes

Examples

Custom Range and Step

<CircularStepperInput
  min={10}
  max={200}
  step={5}
  defaultValue={50}
  size={150}
/>

With Change Handler

const handleChange = (value: number) => {
  console.log("Current value:", value);
  // Process the value
};
 
<CircularStepperInput onChange={handleChange} />;