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

Author: mikolajwilczek

README.md

@@ -96,8 +96,9 @@ To use this library you need to ensure you are using the correct version of Reac
 | `maximumTrackImage` | Assigns a maximum track image. Only static images are supported. The leftmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
 | `minimumTrackImage` | Assigns a minimum track image. Only static images are supported. The rightmost pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
 | `thumbImage` | Sets an image for the thumb. Only static images are supported. Needs to be a URI of a local or network image; base64-encoded SVG is not supported. | Image<br/>.propTypes<br/>.source | |
+| `thumbSize` | Define the size of the thumb. Only for web<br/>Default value is 20px. | number | web |
 | `trackImage` | Assigns a single image for the track. Only static images are supported. The center pixel of the image will be stretched to fill the track. | Image<br/>.propTypes<br/>.source | iOS |
-| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,<br/>with the possibility to change the styling, when thumb is at that given step | `FC<MarkerProps>` | iOS, Android, Windows |
+| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,<br/>with the possibility to change the styling, when thumb is at that given step | `FC<MarkerProps>` | |
 | [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track | bool | iOS, Android, Windows |
 | `ref` | Reference object. | MutableRefObject | web |
 | `View` | [Inherited `View` props...](https://github.com/facebook/react-native-website/blob/master/docs/view.md#props) | | |

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: {
@@ -66,7 +67,7 @@ const RCTSliderWebComponent = React.forwardRef(
       inverted = false,
       disabled = false,
       trackHeight = 4,
-      thumbSize = 20,
+      thumbSize = constants.THUMB_SIZE,
       thumbImage,
       onRNCSliderSlidingStart = (_: Event) => {},
       onRNCSliderSlidingComplete = (_: Event) => {},

package/src/Slider.tsx

@@ -64,8 +64,17 @@ type IOSProps = Readonly<{
   tapToSeek?: boolean;
 }>;
 
+type WebProps = Readonly<{
+  /**
+   * The size of the thumb on the web platform.
+   * Default value is 20px.
+   */
+  thumbSize?: number;
+}>;
+
 type Props = ViewProps &
   IOSProps &
+  WebProps &
   WindowsProps &
   Readonly<{
     /**
@@ -301,6 +310,7 @@ const SliderComponent = (
           thumbImage={props.thumbImage}
           StepMarker={props.StepMarker}
           isLTR={inverted}
+          thumbSize={props.thumbSize}
         />
       ) : null}
       <RCTSliderNativeComponent

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, ViewStyle} 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,33 @@ 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 +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,