Is there a way to show Step Indicator?

[Roshdy]

Is there anyway i can show a dot or some bump or anything indicating the step position.

UseCase Example:

min = 1
max = 3
width = 200

The slider feels like it's not working until you slide 100px (while it's working just fine)

So Showing a far Step indicator will tell the user that he should slide that far to increase the value.

[ardasatata]

Hi, I noticed this package doesn't come with step indicators. I ended up doing something like this, kinda tricky tho, but it works 😆

  const [isTouched, setIsTouched] = useState<boolean>(false)
  const [sliderValue, setSliderValue] = useState<number>(2)

<View>
  <Slider
    style={{width: dimensions.screenWidth - 48, height: 40}}
    minimumValue={0}
    maximumValue={4}
    step={1}
    onValueChange={setSliderValue}
    minimumTrackTintColor={ isTouched ? Colors.FOREST_GREEN : UNTOUCHED_COLOR }
    maximumTrackTintColor={ UNTOUCHED_COLOR }
    thumbTintColor={ isTouched ? Colors.FOREST_GREEN : UNTOUCHED_COLOR_THUMB }
    {...props}
  />
  // horizontal flex
  <View style={{justifyContent: 'space-between', top: - 24, zIndex: -1}}>
  // 5 dots
    {Array.from(Array(5).keys()).map((index)=>{
      const dotColor = index < sliderValue ? Colors.FOREST_GREEN : Colors.GRAY300
      return(
        <View style={{backgroundColor:  isTouched ? dotColor : Colors.GRAY300, width: 8, height: 8, borderRadius: 99}} />
      )
    })}
  </View>
</View>

hope this helps! 😄