Trackmarks

[MattinNajafi]

Is there any way to add trackmarks, i cant find it in the documentation but that would be a great feature? trackmarks based on step and custom trackmarks

[Sharcoux]

You can probably make the track transparent and use your own component to represent the track the way you like.

[MattinNajafi]

How do you calculate each position of step, in that way I can insert steps on the same way so the thumb is same. Atm im using justify-content: space-between from beginning to end of slider, but there is some small differences of thumb position and the generated steps. (see image below)

<View
          pointerEvents="none"
          style={{
            justifyContent: 'space-between',
            flexDirection: 'row',
            marginTop: Platform.OS === 'ios' ? -17 : -14,
            zIndex: 2,
          }}
        >
          {options.map((i, index, arr) => {
            return (
              <View
                key={i}
                style={{
                  height: 50,
                  justifyContent: 'space-between',
                  alignItems: 'center',
                }}
              >
                    <SliderTrackMark key={index} isTrue={getValue() === i} />
                    <Paragraph style={{ textAlign: 'center' }}>{i}</Paragraph>
              </View>
            );
          })}
        </View>

This is how i generate steps, SliderTrackMark is just a <View> that is green when true and else as the other trackmarks.

options is just an array containing number [0,1,2,3.....]

[Sharcoux]

Indeed. I forgot, but there is a small offset corresponding to the rounding of the track on the edges. Its width is the same as the track height.

Have a look here for a working solution.

[Sharcoux]

Does this solve your problem?

[Sharcoux]

I'll close this. Don't hesitate if you still have any issue.

[Sharcoux]

@MattinNajafi The new Version 7.0.1 provides native support for custom track marks. Enjoy.