diff --git a/example-web/src/Examples.tsx b/example-web/src/Examples.tsx
index ea34cca4..b91f4307 100644
--- a/example-web/src/Examples.tsx
+++ b/example-web/src/Examples.tsx
@@ -232,4 +232,19 @@ export const examples: Props[] = [
       );
     },
   },
+  // Check the fix for the issue #743
+  {
+    title: 'With step numbers',
+    render() {
+      return (
+        <SliderExample
+          minimumValue={1}
+          maximumValue={5}
+          step={1}
+          renderStepNumber={true}
+          style={[styles.slider, { height: 70 }]}
+        />
+      );
+    },
+  },
 ];
diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx
index 20d15f26..e11e1853 100644
--- a/package/src/RNCSliderNativeComponent.web.tsx
+++ b/package/src/RNCSliderNativeComponent.web.tsx
@@ -11,6 +11,7 @@ import {
 } from 'react-native';
 //@ts-ignore
 import type {ImageSource} from 'react-native/Libraries/Image/ImageSource';
+import {constants} from './utils/constants';
 
 type Event = Readonly<{
   nativeEvent: {
@@ -40,7 +41,6 @@ export interface Props {
   inverted: boolean;
   disabled: boolean;
   trackHeight: number;
-  thumbSize: number;
   thumbImage?: ImageSource;
   onRNCSliderSlidingStart: (event: Event) => void;
   onRNCSliderSlidingComplete: (event: Event) => void;
@@ -66,7 +66,6 @@ const RCTSliderWebComponent = React.forwardRef(
       inverted = false,
       disabled = false,
       trackHeight = 4,
-      thumbSize = 20,
       thumbImage,
       onRNCSliderSlidingStart = (_: Event) => {},
       onRNCSliderSlidingComplete = (_: Event) => {},
@@ -234,6 +233,7 @@ const RCTSliderWebComponent = React.forwardRef(
       flexGrow: maxPercent,
     };
 
+    const thumbSize = constants.THUMB_SIZE;
     const thumbViewStyle = [
       {
         width: thumbSize,
diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx
index be3b0eaf..70caaabe 100644
--- a/package/src/components/StepsIndicator.tsx
+++ b/package/src/components/StepsIndicator.tsx
@@ -1,5 +1,5 @@
 import React, {FC, Fragment, useCallback, useMemo} from 'react';
-import {View} from 'react-native';
+import {Platform, View} from 'react-native';
 import {StepNumber} from './StepNumber';
 import {MarkerProps, SliderTrackMark} from './TrackMark';
 //@ts-ignore
@@ -15,6 +15,7 @@ export const StepsIndicator = ({
   renderStepNumber,
   thumbImage,
   isLTR,
+  thumbSize = constants.THUMB_SIZE,
 }: {
   options: number[];
   sliderWidth: number;
@@ -23,6 +24,7 @@ export const StepsIndicator = ({
   renderStepNumber?: boolean;
   thumbImage?: ImageSource;
   isLTR?: boolean;
+  thumbSize?: number;
 }) => {
   const stepNumberFontStyle = useMemo(() => {
     return {
@@ -32,13 +34,35 @@ export const StepsIndicator = ({
           : constants.STEP_NUMBER_TEXT_FONT_BIG,
     };
   }, [options.length]);
+
+  const platformDependentStyles = useMemo(() => {
+    const isWeb = Platform.OS === 'web';
+    return {
+      stepIndicatorContainerStyle: isWeb
+        ? styles.stepsIndicator
+        : {
+            ...styles.stepsIndicator,
+            marginHorizontal: sliderWidth * constants.MARGIN_HORIZONTAL_PADDING,
+          },
+      stepIndicatorElementStyle: isWeb
+        ? {
+            ...styles.stepIndicatorElement,
+            width: thumbSize,
+            justifyContent: 'space-between' as const,
+          }
+        : styles.stepIndicatorElement,
+    };
+  }, [sliderWidth, thumbSize]);
+
   const values = isLTR ? options.reverse() : options;
 
   const renderStepIndicator = useCallback(
     (i: number, index: number) => {
       return (
         <Fragment key={index}>
-          <View style={styles.stepIndicatorElement} key={`${index}-View`}>
+          <View
+            style={platformDependentStyles.stepIndicatorElementStyle}
+            key={`${index}-View`}>
             <SliderTrackMark
               key={`${index}-SliderTrackMark`}
               isTrue={currentValue === i}
@@ -67,16 +91,14 @@ export const StepsIndicator = ({
       thumbImage,
       renderStepNumber,
       stepNumberFontStyle,
+      platformDependentStyles.stepIndicatorElementStyle,
     ],
   );
 
   return (
     <View
       pointerEvents="none"
-      style={[
-        styles.stepsIndicator,
-        {marginHorizontal: sliderWidth * constants.MARGIN_HORIZONTAL_PADDING},
-      ]}>
+      style={platformDependentStyles.stepIndicatorContainerStyle}>
       {values.map((i, index) => renderStepIndicator(i, index))}
     </View>
   );
diff --git a/package/src/utils/constants.ts b/package/src/utils/constants.ts
index 9cc7d4c1..72b26fbf 100644
--- a/package/src/utils/constants.ts
+++ b/package/src/utils/constants.ts
@@ -3,6 +3,8 @@ import {Platform} from 'react-native';
 export const constants = {
   SLIDER_DEFAULT_INITIAL_VALUE: 0,
   MARGIN_HORIZONTAL_PADDING: 0.05,
+  // Default thumb size for web platform (used in step indicator positioning)
+  THUMB_SIZE: 20,
   STEP_NUMBER_TEXT_FONT_SMALL: 8,
   STEP_NUMBER_TEXT_FONT_BIG: 12,
   LIMIT_MIN_VALUE: Number.MIN_SAFE_INTEGER,