Custom thumb's component with additional props

example/src/Examples.tsx

@@ -292,6 +292,22 @@ const MyStepMarker: FC<MarkerProps> = ({stepMarked, currentValue}) => {
   );
 };
 
+const CustomComponent: FC<MarkerProps> = ({stepMarked, currentValue, index, max}) => {
+  if (stepMarked) {
+    return (
+      <View style={styles.customComponentFrame}>
+        <View style={[styles.customComponentLeftFrame, styles.filled]}>
+          <Text style={styles.trackText}>{index}</Text>
+        </View>
+        <View style={[styles.customComponentRightFrame, styles.empty]}>
+          <Text style={styles.trackText}>{max}</Text>
+        </View>
+        <Text style={[styles.trackText, {position: "absolute", left: 18}]}>/</Text>
+      </View>);
+  }
+  return currentValue > index ? ( <View style={[styles.trackDot, styles.filled]}></View>) : (<View style={[styles.trackDot, styles.empty]}></View>);
+};
+
 const SliderExampleWithCustomMarker = (props: SliderProps) => {
   const [value, setValue] = useState(props.value ?? CONSTANTS.MIN_VALUE);
 
@@ -317,6 +333,30 @@ const SliderExampleWithCustomMarker = (props: SliderProps) => {
   );
 };
 
+const SliderExampleWithCustomComponentAndFilledSteps = (props: SliderProps) => {
+  const [value, setValue] = useState(props.value || 50);
+
+  return (
+    <View style={{alignItems: 'center'}}>
+      <Text style={styles.text}>{value && +value.toFixed(3)}</Text>
+      <Slider
+        step={CONSTANTS.STEP}
+        style={[styles.slider, props.style]}
+        minimumValue={CONSTANTS.MIN_VALUE}
+        maximumValue={CONSTANTS.MAX_VALUE}
+        thumbImage={require('./resources/empty.png')}
+        tapToSeek
+        {...props}
+        value={value}
+        onValueChange={setValue}
+        StepMarker={CustomComponent}
+        minimumTrackTintColor={'#00629A'}
+        maximumTrackTintColor={'#979EA4'}
+      />
+    </View>
+  )
+}
+
 export default SliderExample;
 
 const styles = StyleSheet.create({
@@ -326,6 +366,43 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     margin: 0,
   },
+  trackText: {
+    color: "#FFFFFF",
+    fontSize: 10,
+    justifyContent: "center",
+    alignSelf: "center",
+    top: 12
+  },
+  trackDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 10,
+    top: 4,
+  },
+  empty: {
+    backgroundColor: '#B3BFC9',
+  },
+  filled: {
+    backgroundColor: '#00629A',
+  },
+  customComponentFrame: {
+    flex: 1,
+    flexDirection: 'row',
+    top: -10,
+    opacity: 0.95
+  },
+  customComponentLeftFrame: {
+    height: 40,
+    width: 20,
+    borderTopLeftRadius: 40,
+    borderBottomLeftRadius: 40,
+  },
+  customComponentRightFrame: {
+    height: 40,
+    width: 20,
+    borderTopRightRadius: 40,
+    borderBottomRightRadius: 40,
+  },
   divider: {
     width: 2,
     height: 20,
@@ -608,6 +685,12 @@ export const examples: Props[] = [
       return <SliderExampleWithCustomMarker />;
     },
   },
+  {
+    title: 'Custom component with steps filled when passed',
+    render() {
+      return <SliderExampleWithCustomComponentAndFilledSteps />;
+    },
+  },
   {
     title: 'Inverted slider direction',
     render() {

package/src/Slider.tsx

@@ -211,7 +211,7 @@ const SliderComponent = (
     ...localProps
   } = props;
   const [currentValue, setCurrentValue] = useState(
-    props.value ?? props.minimumValue,
+    props.value || props.minimumValue || constants.SLIDER_DEFAULT_INITIAL_VALUE,
   );
   const [width, setWidth] = useState(0);
 
@@ -338,7 +338,7 @@ const SliderComponent = (
 const SliderWithRef = React.forwardRef(SliderComponent);
 
 SliderWithRef.defaultProps = {
-  value: 0,
+  value: constants.SLIDER_DEFAULT_INITIAL_VALUE,
   minimumValue: 0,
   maximumValue: 1,
   step: 0,

package/src/components/StepsIndicator.tsx

@@ -18,7 +18,7 @@ export const StepsIndicator = ({
 }: {
   options: number[];
   sliderWidth: number;
-  currentValue?: number;
+  currentValue: number;
   StepMarker?: FC<MarkerProps>;
   renderStepNumber?: boolean;
   thumbImage?: ImageSource;
@@ -41,13 +41,16 @@ export const StepsIndicator = ({
       {values.map((i, index) => {
         return (
           <Fragment key={index}>
-            <View style={styles.stepIndicatorElement}>
+            <View style={styles.stepIndicatorElement} key={`${index}-View`}>
               <SliderTrackMark
                 key={`${index}-SliderTrackMark`}
                 isTrue={currentValue === i}
+                index={i}
                 thumbImage={thumbImage}
                 StepMarker={StepMarker}
                 currentValue={currentValue}
+                min={options[0]}
+                max={options[options.length - 1]}
               />
               {renderStepNumber ? (
                 <StepNumber

package/src/components/TrackMark.tsx

@@ -5,25 +5,40 @@ import {styles} from '../utils/styles';
 export type MarkerProps = {
   stepMarked: boolean;
   currentValue?: number;
+  index?: number;
+  min?: number;
+  max?: number;
 };
 
 export type TrackMarksProps = {
   isTrue: boolean;
+  index: number;
   thumbImage?: ImageURISource;
   StepMarker?: FC<MarkerProps>;
-  currentValue?: number;
+  currentValue: number;
+  min: number;
+  max: number;
 };
 
 export const SliderTrackMark = ({
   isTrue,
+  index,
   thumbImage,
   StepMarker,
   currentValue,
+  min,
+  max,
 }: TrackMarksProps) => {
   return (
     <View style={styles.trackMarkContainer}>
       {StepMarker ? (
-        <StepMarker stepMarked={isTrue} currentValue={currentValue} />
+        <StepMarker
+          stepMarked={isTrue}
+          index={index}
+          currentValue={currentValue}
+          min={min}
+          max={max}
+        />
       ) : null}
       {thumbImage && isTrue ? (
         <View style={styles.thumbImageContainer}>

package/src/utils/constants.ts

@@ -1,4 +1,5 @@
 export const constants = {
+  SLIDER_DEFAULT_INITIAL_VALUE: 0,
   MARGIN_HORIZONTAL_PADDING: 0.05,
   STEP_NUMBER_TEXT_FONT_SMALL: 8,
   STEP_NUMBER_TEXT_FONT_BIG: 12,

package/typings/index.d.ts

@@ -22,14 +22,18 @@ export interface SliderRef {
 
 export type TrackMarksProps = {
   isTrue: boolean;
+  index: number;
   thumbImage?: ImageURISource;
   StepMarker?: FC<MarkerProps> | boolean;
-  currentValue?: number;
+  currentValue: number;
 };
 
 export type MarkerProps = {
   stepMarked: boolean;
   currentValue?: number;
+  index?: number;
+  min?: number;
+  max?: number;
 };
 
 export interface SliderPropsIOS extends ReactNative.ViewProps {