StepMarker is not a prop at least on index.d.ts how to add a custom step marker?

[tgmarinho]

import * as React from 'react';
import * as ReactNative from 'react-native';

type Constructor<T> = new (...args: any[]) => T;

type SliderReferenceType =
  | (React.MutableRefObject<SliderRef> & React.LegacyRef<Slider>)
  | undefined;

export interface SliderPropsAndroid extends ReactNative.ViewProps {
  /**
   * Color of the foreground switch grip.
   */
  thumbTintColor?: string;
}

export interface SliderRef {
  updateValue(value: number): void;
}

export interface SliderPropsIOS extends ReactNative.ViewProps {
  /**
   * Assigns a maximum track image. Only static images are supported.
   * The leftmost pixel of the image will be stretched to fill the track.
   */
  maximumTrackImage?: ReactNative.ImageURISource;

  /**
   * Assigns a minimum track image. Only static images are supported.
   * The rightmost pixel of the image will be stretched to fill the track.
   */
  minimumTrackImage?: ReactNative.ImageURISource;

  /**
   * Permits tapping on the slider track to set the thumb position.
   * Defaults to false on iOS. No effect on Android or Windows.
   */
  tapToSeek?: boolean;

  /**
   * Sets an image for the thumb. Only static images are supported.
   */
  thumbImage?: ReactNative.ImageURISource;

  /**
   * 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.
   */
  trackImage?: ReactNative.ImageURISource;
}

export interface SliderPropsWindows extends ReactNative.ViewProps {
  /**
   * Controls the orientation of the slider, default value is 'false' (horizontal).
   */
  vertical?: boolean;
}

export interface SliderProps
  extends SliderPropsIOS,
    SliderPropsAndroid,
    SliderPropsWindows {
  /**
   * If true the user won't be able to move the slider.
   * Default value is false.
   */
  disabled?: boolean;

  /**
   * The color used for the track to the right of the button.
   * Overrides the default blue gradient image.
   */
  maximumTrackTintColor?: string;

  /**
   * Initial maximum value of the slider. Default value is 1.
   */
  maximumValue?: number;

  /**
   * The lower limit value of the slider. The user won't be able to slide below this limit.
   */
  lowerLimit?: number;

  /**
   * The upper limit value of the slider. The user won't be able to slide above this limit.
   */
  upperLimit?: number;

  /**
   * The color used for the track to the left of the button.
   * Overrides the default blue gradient image.
   */
  minimumTrackTintColor?: string;

  /**
   * Initial minimum value of the slider. Default value is 0.
   */
  minimumValue?: number;

  /**
   * Callback that is called when the user picks up the slider.
   * The initial value is passed as an argument to the callback handler.
   */
  onSlidingStart?: (value: number) => void;

  /**
   * Callback called when the user finishes changing the value (e.g. when the slider is released).
   */
  onSlidingComplete?: (value: number) => void;

  /**
   * Callback continuously called while the user is dragging the slider.
   */
  onValueChange?: (value: number) => void;

  /**
   * Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0.
   */
  step?: number;

  /**
   * Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info.
   */
  style?: ReactNative.StyleProp<ReactNative.ViewStyle>;

  /**
   * Used to locate this view in UI automation tests.
   */
  testID?: string;

  /**
   * Write-only property representing the value of the slider.
   * Can be used to programmatically control the position of the thumb.
   * Entered once at the beginning still acts as an initial value.
   * The value should be between minimumValue and maximumValue,
   * which default to 0 and 1 respectively.
   * Default value is 0.
   *
   * This is not a controlled component, you don't need to update the
   * value during dragging.
   */
  value?: number;

  /**
   * Reverses the direction of the slider.
   */
  inverted?: boolean;

  /**
   * A string of one or more words to be announced by the screen reader.
   * Otherwise, it will announce the value as a percentage.
   * Requires passing a value to `accessibilityIncrements` to work correctly.
   * Should be a plural word, as singular units will be handled.
   */
  accessibilityUnits?: string;

  /**
   * An array of values that represent the different increments displayed
   * by the slider. All the values passed into this prop must be strings.
   * Requires passing a value to `accessibilityUnits` to work correctly.
   * The number of elements must be the same as `maximumValue`.
   */
  accessibilityIncrements?: Array<string>;

  /**
   * Reference object.
   */
  ref?: SliderReferenceType;
}

/**
 * A component used to select a single value from a range of values.
 */
declare class SliderComponent extends React.Component<SliderProps> {}
declare const SliderBase: Constructor<ReactNative.NativeMethods> &
  typeof SliderComponent;
export default class Slider extends SliderBase {}
export type SliderIOS = Slider;

<Slider
            style={{ width: '100%', height: 40, position: 'relative' }}
            minimumValue={data.min}
            maximumValue={data.max}
            minimumTrackTintColor={theme.colors.secondary[600]}
            maximumTrackTintColor={theme.colors.primary[600]}
            value={amount}
            onValueChange={handleChange}
            tapToSeek
            thumbTintColor={theme.colors.primary[500]}
            StepMarker={({ stepMarked }) => {
              return stepMarked ? (
                <Svg height={20} width={20}>
                  <Polygon points='0 0 10 10 20 0' fill='#FFA300' />
                </Svg>
              ) : null
            }}
          />

"@react-native-community/slider": "^4.5.0", "react-native": "0.73.2", "expo": "^50.0.0",

How to add a custom step marker on slider 4.5.0?

[BartoszKlonowski]

Hello @tgmarinho, thank you for reaching out! Please be aware that this feature is merged into main branch, but no yet fully released to public. If you would like to try out the feature before next release you can clone this repo and use example app. Let me know if this answer your question.

[BartoszKlonowski]

Hello again, @tgmarinho! Can you check with the latest (v4.5.1) version, please?

[BartoszKlonowski]

Closing due to lack of author's response, and the issue is most likely outdated with the latest version.

[AyoCodess]

Closing due to lack of author's response, and the issue is most likely outdated with the latest version.

Is this feature still disabled in the release version, as it does not render the custom marker.

"@react-native-community/slider": "^4.5.2",

   <Slider
        StepMarker={({ stepMarked }) => {
          return stepMarked ? (
            <Svg height={20} width={20}>
              <Polygon points="0 0 10 10 20 0" fill="#FFA300" />
            </Svg>
          ) : null;
        }}
        className="w-full"
        onSlidingComplete={onSlidingComplete}
        onValueChange={onValueChange}
        step={1}
        value={progress}
        minimumValue={min}
        maximumValue={max}
        minimumTrackTintColor={minimumTrackTintColor}
        maximumTrackTintColor={maximumTrackTintColor}
        tapToSeek
      />

[BartoszKlonowski]

Hello @AyoCodess! No, this feature is "experimental", which means may contain some bugs, or inconveniences, but it is enabled. For how to utilize these new props please see example app.

Looking at your code, I assume it should work (comparing to how StepMarker should be used), however, I'm unable to provide you with any more suggestions or tips/answers, as I don't know what these Svg and Polygon components are. If you could provide me with some reusable code I can take a look and verify.

[AyoCodess]

I figured it out, thanks.