From d7eb359e905da25395a12af3f009f8db479fae68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miko=C5=82aj=20Wilczek?= Date: Thu, 18 Dec 2025 20:02:25 +0100 Subject: [PATCH 1/7] 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 --- README.md | 3 +- example-web/src/Examples.tsx | 15 +++++++++ package/src/RNCSliderNativeComponent.web.tsx | 3 +- package/src/Slider.tsx | 10 ++++++ package/src/components/StepsIndicator.tsx | 32 ++++++++++++++++---- package/src/utils/constants.ts | 2 ++ 6 files changed, 57 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 56902cb8..22308529 100644 --- a/README.md +++ b/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
.propTypes
.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
.propTypes
.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
.propTypes
.source | | +| `thumbSize` | Define the size of the thumb. Only for web
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
.propTypes
.source | iOS | -| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,
with the possibility to change the styling, when thumb is at that given step | `FC` | iOS, Android, Windows | +| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,
with the possibility to change the styling, when thumb is at that given step | `FC` | | | [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.
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) | | | 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 ( + + ); + }, + }, ]; diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index 20d15f26..b91c45a6 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: { @@ -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) => {}, diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index 5ac1977d..bce6b6e0 100644 --- a/package/src/Slider.tsx +++ b/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} { 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 ( - + + style={platformDependentStyles.stepIndicatorContainerStyle}> {values.map((i, index) => renderStepIndicator(i, index))} ); 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, From 90c73cfde6b96c4833e9ae4b3f76f2447cb985bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miko=C5=82aj=20Wilczek?= Date: Tue, 13 Jan 2026 20:13:59 +0100 Subject: [PATCH 2/7] chore(web): adjust styling, remove thumbSize prop --- README.md | 1 - package/src/RNCSliderNativeComponent.web.tsx | 3 +-- package/src/Slider.tsx | 10 ---------- package/src/components/StepsIndicator.tsx | 4 +++- 4 files changed, 4 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 22308529..8be1f89f 100644 --- a/README.md +++ b/README.md @@ -96,7 +96,6 @@ 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
.propTypes
.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
.propTypes
.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
.propTypes
.source | | -| `thumbSize` | Define the size of the thumb. Only for web
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
.propTypes
.source | iOS | | [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,
with the possibility to change the styling, when thumb is at that given step | `FC` | | | [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.
Numbers of steps are displayed under the track | bool | iOS, Android, Windows | diff --git a/package/src/RNCSliderNativeComponent.web.tsx b/package/src/RNCSliderNativeComponent.web.tsx index b91c45a6..e11e1853 100644 --- a/package/src/RNCSliderNativeComponent.web.tsx +++ b/package/src/RNCSliderNativeComponent.web.tsx @@ -41,7 +41,6 @@ export interface Props { inverted: boolean; disabled: boolean; trackHeight: number; - thumbSize: number; thumbImage?: ImageSource; onRNCSliderSlidingStart: (event: Event) => void; onRNCSliderSlidingComplete: (event: Event) => void; @@ -67,7 +66,6 @@ const RCTSliderWebComponent = React.forwardRef( inverted = false, disabled = false, trackHeight = 4, - thumbSize = constants.THUMB_SIZE, thumbImage, onRNCSliderSlidingStart = (_: Event) => {}, onRNCSliderSlidingComplete = (_: Event) => {}, @@ -235,6 +233,7 @@ const RCTSliderWebComponent = React.forwardRef( flexGrow: maxPercent, }; + const thumbSize = constants.THUMB_SIZE; const thumbViewStyle = [ { width: thumbSize, diff --git a/package/src/Slider.tsx b/package/src/Slider.tsx index bce6b6e0..5ac1977d 100644 --- a/package/src/Slider.tsx +++ b/package/src/Slider.tsx @@ -64,17 +64,8 @@ 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<{ /** @@ -310,7 +301,6 @@ const SliderComponent = ( thumbImage={props.thumbImage} StepMarker={props.StepMarker} isLTR={inverted} - thumbSize={props.thumbSize} /> ) : null} { const isWeb = Platform.OS === 'web'; return { @@ -52,6 +53,7 @@ export const StepsIndicator = ({ : styles.stepIndicatorElement, }; }, [sliderWidth, thumbSize]); + const values = isLTR ? options.reverse() : options; const renderStepIndicator = useCallback( From 08dfd93afec5360d1b2456ccdb06fb332a6c374d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miko=C5=82aj=20Wilczek?= Date: Tue, 13 Jan 2026 20:18:27 +0100 Subject: [PATCH 3/7] chore(docs): reverted README changes --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8be1f89f..56902cb8 100644 --- a/README.md +++ b/README.md @@ -97,7 +97,7 @@ To use this library you need to ensure you are using the correct version of Reac | `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
.propTypes
.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
.propTypes
.source | | | `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
.propTypes
.source | iOS | -| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,
with the possibility to change the styling, when thumb is at that given step | `FC` | | +| [`StepMarker`](#stepmarker) | Component to be rendered for each step on the track,
with the possibility to change the styling, when thumb is at that given step | `FC` | iOS, Android, Windows | | [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.
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) | | | From 362c982ef157ed269029b0b591c53700c56f2ad8 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Wed, 14 Jan 2026 11:56:09 +0100 Subject: [PATCH 4/7] 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` --- package/src/components/StepsIndicator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx index 70caaabe..a0be2fb7 100644 --- a/package/src/components/StepsIndicator.tsx +++ b/package/src/components/StepsIndicator.tsx @@ -47,7 +47,7 @@ export const StepsIndicator = ({ stepIndicatorElementStyle: isWeb ? { ...styles.stepIndicatorElement, - width: thumbSize, + width: constants.THUMB_SIZE, justifyContent: 'space-between' as const, } : styles.stepIndicatorElement, From 519f739022416c0d1de61dafa2d9ffd819440353 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Wed, 14 Jan 2026 12:01:20 +0100 Subject: [PATCH 5/7] Fix the `thumbSize` removal from props Remove the removed `thumbSize` from deps of styles memo. --- package/src/components/StepsIndicator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx index a0be2fb7..f09dcb5a 100644 --- a/package/src/components/StepsIndicator.tsx +++ b/package/src/components/StepsIndicator.tsx @@ -52,7 +52,7 @@ export const StepsIndicator = ({ } : styles.stepIndicatorElement, }; - }, [sliderWidth, thumbSize]); + }, [sliderWidth]); const values = isLTR ? options.reverse() : options; From 69d881d939fc9c1eaa64504849157137dc614bbd Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Wed, 14 Jan 2026 12:07:50 +0100 Subject: [PATCH 6/7] Remove `thumbSize` default from props --- package/src/components/StepsIndicator.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx index f09dcb5a..b4a7c928 100644 --- a/package/src/components/StepsIndicator.tsx +++ b/package/src/components/StepsIndicator.tsx @@ -15,7 +15,6 @@ export const StepsIndicator = ({ renderStepNumber, thumbImage, isLTR, - thumbSize = constants.THUMB_SIZE, }: { options: number[]; sliderWidth: number; From 8ec50b8b1716d65c6abdbe0ac5ee00750f165d31 Mon Sep 17 00:00:00 2001 From: Bartosz Klonowski <70535775+BartoszKlonowski@users.noreply.github.com> Date: Wed, 14 Jan 2026 12:08:08 +0100 Subject: [PATCH 7/7] Remove optional `thumbSize` from props --- package/src/components/StepsIndicator.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/package/src/components/StepsIndicator.tsx b/package/src/components/StepsIndicator.tsx index b4a7c928..4b520564 100644 --- a/package/src/components/StepsIndicator.tsx +++ b/package/src/components/StepsIndicator.tsx @@ -23,7 +23,6 @@ export const StepsIndicator = ({ renderStepNumber?: boolean; thumbImage?: ImageSource; isLTR?: boolean; - thumbSize?: number; }) => { const stepNumberFontStyle = useMemo(() => { return {