`RangeError: invalid array length` when using `step` prop

[willashley23]

When using step={0.1} or any number, the component fails to mount with error RangeError: invalid array length

<Slider
            minimumValue={sliderMin}
            maximumValue={sliderMax}
            progress={sliderValue}
            onSlidingComplete={handleSliderChange}
            containerStyle={{ height: 20, borderRadius: 100 }}
            hapticMode="both"
            step={0.1}
            onHapticFeedback={() => {
              Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
            }}
            theme={{
              minimumTrackTintColor: colors.blue[500],
              maximumTrackTintColor: colors.blue[100],
              bubbleBackgroundColor: "#666",
            }}
          />

[Isopodus]

I have encountered this issue as well, but turns out it is mostly a 'step' prop naming problem. I expected this prop to be a dilution of a single slider move, but it is rather changing the amount of available slider "positions". Since positions count should be integer, the code should be something like this:

    <Slider
          progress={progress}
          minimumValue={min}
          maximumValue={max}
          step={Math.ceil((maximumValue - minimumValue) / step)} // Positions count, not a single step size
          onSlidingComplete={onValueChange}
      />

This way the slider positions count is calculated from the total slider range divided by some step size.

@alantoa, I think this prop should be renamed accordingly. The documentation also does not explain that it should be used that way.

[fform]

I just ran into this same problem and in manifested in two separate points of confusion:

1. If you have too many steps, the bar looks like it "fills" with white, or whatever your mark style is set to. This was really confusing as the theme doesn't change anything and I couldn't reason about why the bar was filled in
2. Step is typically "by how much should each tick increase", at least on any other slider. I was setting this to a huge number and it makes the component lock up.

My use case is a real estate purchase price, so the slider is listing price +- 30% For a $500k home that's $350,000 - $650,000 I wanted the step to be increments of $1k, so when I set step to 1000, it instead made one thousand marks.

Instead, I have to find the diff between my min max and then divide by the step I want (max - min) / desiredStep = sliderStepTickCount which then I have to round because step breaks on uneven numbers, and I need to limit it to something like 100 so it doesn't render too many marks.

[alantoa]

Good call, I'll try to improve it.