fix(web): align step markers with thumb position using thumbSize prop (#751)

* fix(web): align step markers with thumb position using thumbSize prop

- Pass thumbSize prop to StepsIndicator component
- Use actual thumbSize value instead of hardcoded constant
- Add WebProps type for proper TypeScript typing
- Fix step marker alignment on web platform edges

Fixes #743

* chore(web): adjust styling, remove thumbSize prop

* chore(docs): reverted README changes

* Remove `thumbSize` from props of `StepsIndicator`

There's no scenario in which, currently, `StepsIndicator` component would be used
with any custom `thumbSize` provided.
So for now, let's just remove it and replace it's only call with `constants.THUMB_SIZE`

* Fix the `thumbSize` removal from props

Remove the removed `thumbSize` from deps of styles memo.

* Remove `thumbSize` default from props

* Remove optional `thumbSize` from props

---------

Co-authored-by: Bartosz Klonowski <[email protected]>

Author: mikolajwilczek

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 }]}
+        />
+      );
+    },
+  },
 ];

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,

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
@@ -32,13 +32,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: constants.THUMB_SIZE,
+            justifyContent: 'space-between' as const,
+          }
+        : styles.stepIndicatorElement,
+    };
+  }, [sliderWidth]);
+
   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 +89,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>
   );

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,