Slider Amount exceeds maximum value when scrolling out of the boundries

[itsnyx]

Hello,

i have a slider with 50% of width and when i scroll the slider to maximum position and keep scrolling to right side after the slider reaches the 100% the slider component shows 100% but the actual value still increases and will be bigger than 100

also the same thing happens for 0 if you have space in mobile touch screen and keep scrolling to left the slider progress value will be negative !

is there a way to make sure slider will not change the progress value more than the min and max amount ?

  const progress = useSharedValue(50);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
  console.log('progress : ', progress.value);
  return (
    <>
      <Label label={`${progress.value}`} />
      <Slider
        progress={progress}
        minimumValue={min}
        maximumValue={max}
        style={{
          width: '50%',
        }}
      />

[itsnyx]

one simple solution is to add a forceBound parameter for slider so to make sure slider will not update the values greater than max and smaller than min

        if (!disableTrackFollow) {
          if (forceBound) {
            if (xToProgress(x) <= minimumValue.value) {
              progress.value = minimumValue.value;
            } else if (xToProgress(x) >= maximumValue.value) {
              progress.value = maximumValue.value;
            } else {
              progress.value = xToProgress(x);
            }
          } else {
            progress.value = xToProgress(x);
          }
        }

[dosubot]

Hello @itsnyx! I'm Dosu, your friendly bot here to help you solve bugs, answer questions, and support you in becoming a contributor. I'm here while you wait for a human maintainer. What can I assist you with today?

To ensure that the slider component does not exceed its minimum and maximum values, you can implement a check in the onChangeText function of the TextInput component. This function already contains logic to prevent the progress value from becoming negative or exceeding 100. Here's a relevant code snippet:

<TextInput
  style={{
    color: markColor,
    height: 38,
    borderRadius: 8,
    paddingHorizontal: 40,
    fontWeight: '500',
    fontSize: 14,
    width: 120,
  }}
  autoFocus={false}
  inputMode="numeric"
  {...(Platform.OS === 'web'
    ? { value: value.toString() }
    : { defaultValue: value.toString() })}
  placeholder="Enter value"
  onChangeText={(text) => {
    if (!isNaN(Number(text))) {
      if (Number(text) > max.value) {
        setValue(max.value);
      } else if (Number(text) < min.value) {
        setValue(min.value);
      } else {
        setValue(Number(text));
      }
    }
  }}
/>

Additionally, when using the react-native-awesome-slider, you can set the minimumValue and maximumValue properties directly on the Slider component to ensure the slider's progress stays within the defined range:

<Slider
  progress={progress}
  style={styles.slider}
  minimumValue={min}
  maximumValue={max}
  theme={COLORS.sliderTheme}
  disableTapEvent
  disableTrackFollow
  hapticMode={HapticModeEnum.BOTH}
/>

This setup provides an additional layer of boundary enforcement, ensuring the slider does not exceed its limits even when scrolling beyond the boundaries ^[1][2].

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}