Updating step to achieve an uneven step ratio

[Alicecold]

Hello! I am currently working on an app where I'd like to set an specific distance. At distances longer than 1000m it doesn't really make sense to have it set on steps of 100m anymore, so then it would be better with steps of 500m, while on distances shorter than 1000m it would be nice to have the specificity of 100m steps.

Currently we are doing this by updating the step value based on the current value of the slider. However, this seems to sometime fail, and sudden changes to the value seem to reset the slider to it's starting value (500m).

I am posing this as a question since I have no idea of this is an bug or (more likely) that our implementation is borky. Is there a better way to implement an uneven stepping of the slider?

[BartoszKlonowski]

Hello @Alicecold!
I see the issue you have based on the description and I'm afraid that having uneven steps is just per design.
However, the second part of your description - the way you are dealing with this lack of uneven steps - feels (at the first look) like an issue of some kind.
I would be happy to repro that but I could use just a small example of the scenario we are talking here about. Please share a code showcasing the scenario so I can use that in my debugging and analysis.
Thank you!

[Alicecold]

That can be fixed: however, the code is kind of messy (having inline conditional rendering in so many places) and I am new in this project. I will try to split it up into the relevant parts. If you need an complete mimimal working example, it would take a lot more intrusive extraction, so is would have to do for now. Tell me if this isn't enough to replicate the problem!

This is our implementation of the slider component (in a separate file/component):

import ReactSlider from "@react-native-community/slider";
import { colors, ColorType } from "b3runtime/styles/colors";
import React from "react";

interface Props {
  initialValue?: number;
  min: number;
  max: number;
  step?: number;
  onChange?: (newValue: number) => void;
  disabled?: boolean;
  color?: ColorType;
}

const Slider: React.FC<Props> = (props) => (
  <ReactSlider
    value={props.initialValue}
    style={{ width: "100%", height: 40 }}
    minimumValue={props.min}
    maximumValue={props.max}
    step={props.step}
    minimumTrackTintColor={colors[props.color || "primary"].background}
    maximumTrackTintColor={colors.disabled.brighter.background}
    onValueChange={props.onChange}
  />
);
export default Slider;

Use in the component:

            <Slider
              initialValue={500}
              min={200}
              max={9700}
              step={stepInterval}
              onChange={handleChangeTriggerByDistanceInterval}
            />

The callback function for onChange and declaration of stepInterval and trigger Interval:

const [stepInterval, setStepInterval] = useState(100);
 const [triggerInterval, setTriggerInterval] = useState(500); // this is later used for said set value
  
const handleChangeTriggerByDistanceInterval = (newInterval: number) => {
   if (newInterval > 1000) {
     setStepInterval(500);
     setTriggerInterval(newInterval + 300);
   } else if (newInterval <= 1000) {
     setStepInterval(100);
     setTriggerInterval(newInterval);
   }
 };

Originally initialValue was erronously set to triggerInterval on all uses of Slider, which made the sliders jump around when quickly swiped (tested on android, with expo 47). Now when I do the same thing it instead resets to 500 instead of to the value I've tried to set it to in this particular use of the component. Otherwise it works flawlessly.