diff --git a/README.md b/README.md
index 354ce54..164284c 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ function Example() {
       minimumValue={10}
       maximumValue={100}
       stepValue={10}
-      initialValue={INITIAL_VALUE}
+      value={INITIAL_VALUE}
       size="lg"
       inactiveTrackColor="#fed7aa"
       activeTrackColor="#fddec0"
@@ -87,8 +87,8 @@ function Example() {
 | minimumValue                                | number   | `0`                       | The minimum value.                                                                                                                                 |
 | maximumValue                                | number   | `Number.MAX_SAFE_INTEGER` | The maximum value.                                                                                                                                 |
 | stepValue                                   | number   | `1`                       | The step increment value.                                                                                                                          |
-| initialValue                                | number   | `minimumValue`            | The initial value.                                                                                                                                 |
-| onChange                                    | Function | `undefined`               | The callback invoked when the value changes.                                                                                                       |
+| value                                | number   |             | The initial value.                                                                                                                                 |
+| onChange                                    | Function |                | The callback invoked when the value changes.                                                                                                       |
 | size                                        | string   | `sm`                      | The size of the numeric stepper. There are 3 available sizes:<ul><li>`sm` — 185x74px</li><li>`md` — 277.5x111px</li><li>`lg` — 370x148px</li></ul> |
 | inactiveTrackColor                          | string   | `#2b2b2b`                 | The color of the track while the thumb is not being horizontally dragged.                                                                          |
 | activeTrackColor                            | string   | `#1f1f1f`                 | The color of the track while the thumb is being horizontally dragged and is at the maximum trackable distance from the track's center.             |
@@ -135,6 +135,7 @@ function EnhancedThumbAccessibilityExample() {
   const [value, setValue] = useState(0);
   return (
     <NumericStepper
+      value={value}
       thumbAriaLabel={`${value} items`}
       onChange={(value) => {
         setValue(value);
diff --git a/src/NumericStepper.tsx b/src/NumericStepper.tsx
index 067fbe4..81b5249 100644
--- a/src/NumericStepper.tsx
+++ b/src/NumericStepper.tsx
@@ -44,15 +44,15 @@ export interface Props extends StyledProps, AccessibilityProps {
   minimumValue?: number;
   maximumValue?: number;
   stepValue?: number;
-  initialValue?: number;
-  onChange?: (value: number) => void;
+  value: number;
+  onChange: (value: number) => void;
 }
 
 export function NumericStepper({
   minimumValue = 0,
   maximumValue = Number.MAX_SAFE_INTEGER,
   stepValue = 1,
-  initialValue = minimumValue,
+  value,
   onChange,
   size = 'sm',
   inactiveTrackColor = '#2b2b2b',
@@ -71,7 +71,6 @@ export function NumericStepper({
   thumbAriaLabel,
   incrementButtonAriaLabel,
 }: Props) {
-  const [value, setValue] = React.useState<number>(initialValue);
   const [dragListener, setDragListener] = React.useState<boolean>(true);
   const [dragDirection, setDragDirection] = React.useState<DragDirection>();
   const [isDragging, setIsDragging] = React.useState<boolean>(false);
@@ -135,18 +134,18 @@ export function NumericStepper({
 
   function decrementValue(): void {
     if (isDecrementable) {
-      setValue((value) => value - stepValue);
+      onChange(value - stepValue);
     }
   }
 
   function incrementValue(): void {
     if (isIncrementable) {
-      setValue((value) => value + stepValue);
+      onChange(value + stepValue);
     }
   }
 
   function resetValue(): void {
-    setValue(minimumValue);
+    onChange(minimumValue);
   }
 
   function onDirectionLock(axis: DragDirection): void {
diff --git a/src/stories/NumericStepper.stories.tsx b/src/stories/NumericStepper.stories.tsx
index 6275530..640ab5f 100644
--- a/src/stories/NumericStepper.stories.tsx
+++ b/src/stories/NumericStepper.stories.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
 import { NumericStepper } from '../NumericStepper';
 
 export default {
@@ -17,17 +16,19 @@ export default {
   },
 } as ComponentMeta<typeof NumericStepper>;
 
-const Template: ComponentStory<typeof NumericStepper> = (args) => (
-  <NumericStepper {...args} />
-);
+const Template: ComponentStory<typeof NumericStepper> = (args) => {
+  const [value, setValue] = React.useState(0);
+  const onChange = (val: number) => {
+    setValue(val);
+  };
+  return <NumericStepper {...args} value={value} onChange={onChange} />;
+};
 
 export const Playground = Template.bind({});
 Playground.args = {
   minimumValue: 0,
   maximumValue: Number.MAX_SAFE_INTEGER,
   stepValue: 1,
-  initialValue: 0,
-  onChange: action('onChange'),
   size: 'lg',
   inactiveTrackColor: '#2b2b2b',
   activeTrackColor: '#1f1f1f',
@@ -58,7 +59,6 @@ Customized.args = {
   minimumValue: 10,
   maximumValue: 100,
   stepValue: 10,
-  initialValue: 20,
   size: 'lg',
   inactiveTrackColor: '#fed7aa',
   activeTrackColor: '#fddec0',