Android multiple issues: too many steps, disabling removes minimumTrackTintColor, extra space

[Chriko2502]

Hi together,

I came across multiple issues when using the silder on different platforms. While it works great on iOS and web, I am encountering following issues on android only:

1. too many steps
   There is one extra tick/step added to the right/maximum end of the slider without any value change ?!

2. disabling removes minimumTrackTintColor
   When disabling the slider the minimumTrackTintColor is removed/ignored ?!

3. extra space before and after the trackbar
   There is extra space before and after the trackbar added. But I managed to apply the following workaround:
   style={{marginHorizontal: (Platform.OS != 'android') ? 0 : -15}}

All issues can be reproduced/seen in:
https://snack.expo.dev/@chr1k0/slider-example

Any possibility to fix problem 1. and 2. or is there any known workaround?

Thanks in advance!

[BartoszKlonowski]

Hello @Chriko2502, thanks for reaching out!
Let me address those concerns one by one:

1. Too many steps
   Yes, this looks like a bug in how the values for the steps are calculated and compared. Thank you for noticing that!
2. Disabling removes the minimumTrackTintColor
   This, unfortunately, is a default behavior of Slider and is not planned to be changed.
   This Slider package exposes the Slider and SeekBar of iOS and Android native implementation with all of their behaviors and system-specifics, including the design of disabled Slider.
3. Extra space before and after the trackbar
   Yes, this is a known issue, tracked in Remove space before and after the slider bar #98

---

Workaround for the 1.
You asked for a solution or workaround for these, so for the 1. problem, before a fix is implemented, you can simply use values of integer, just like so:

      <Slider
        //style={{marginHorizontal: (Platform.OS != 'android') ? 0 : -15}} 
        disabled={false} //true
        minimumValue={80}
        maximumValue={120}
        step={5}
        value={100}
        onValueChange={(value) => {
          setFontSize(value/100)
        }}
        tapToSeek={true}
        thumbTintColor={'grey'}
        minimumTrackTintColor={'blue'}
        maximumTrackTintColor={'grey'}
      />

☝️ I checked this on the snack you sent, and using integers works as expected. The rest of the code is as you implemented.

[Chriko2502]

Hi @BartoszKlonowski, thanks for your quick reply!

Regarding 1: Indeed changing from floats to integers solved the problem. Thanks for pointing out!

Regarding 2: Seems the default behaviour on iOS is the one, which I expected, the one from android seems not user friendly to me. Again thanks for clarification, I will create a workaround by disabling touch events on parent elements.

Regarding 3: yes saw the linked issue as well but since there was no update, just wanted to clarify if I might missed something.

My points are clarified and the issue can be closed. If you would like to keep it open to follow up on "Problem 1"....

Thanks!