chore(web): adjust styling, remove thumbSize prop

Author: mikolajwilczek

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<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>` | |
 | [`renderStepNumber`](#renderstepnumber) | Turns on the displaying of numbers of steps.<br/>Numbers of steps are displayed under the track | bool | iOS, Android, Windows |

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,

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}
       <RCTSliderNativeComponent

package/src/components/StepsIndicator.tsx

@@ -1,5 +1,5 @@
 import React, {FC, Fragment, useCallback, useMemo} from 'react';
-import {Platform, View, ViewStyle} from 'react-native';
+import {Platform, View} from 'react-native';
 import {StepNumber} from './StepNumber';
 import {MarkerProps, SliderTrackMark} from './TrackMark';
 //@ts-ignore
@@ -34,6 +34,7 @@ export const StepsIndicator = ({
           : constants.STEP_NUMBER_TEXT_FONT_BIG,
     };
   }, [options.length]);
+
   const platformDependentStyles = useMemo(() => {
     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(