miblanchard / react-native-slider

A pure JavaScript <Slider> component for react-native and react-native-web

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Thumb placement problem with double thumb, big values and small step

BadLice opened this issue · comments

Hello!

I am rendering a slider with two thumbs, a big range of values (from 0 to 305) and a step of 1.
I am facing an problem when sliding the max value thumb to the left: when the max value thumb is near the min value thumb, it stops slinding left, but keeping sliding the actual value and the track correctly slide.

this is the point where the thumb stops sliding
MicrosoftTeams-image (2)

here im keeping sliding, as you can see the thumb is locked to the previous position, but the track di actually slide left a bit, and the value decreased
MicrosoftTeams-image (4)

here i slided as much as possible to the left, so that the actual max value is 1, so the track is 1px wide, but the thumb is still locked
MicrosoftTeams-image (3)

here the code:

      <Slider
        containerStyle={{ marginHorizontal: 10 }}
        disabled={rest.minimumValue === rest.maximumValue || rest.disabled}
        thumbStyle={styles.thumb}
        trackStyle={styles.rail}
        minimumTrackTintColor={platform.brandPrimary}
        maximumTrackTintColor={platform.brandPrimary}
        renderAboveThumbComponent={handleRenderAboveThumbComponent}
        onSlidingComplete={handleOnSlidingComplete}
        animationType="spring"
        minimumValue={rest.minimumValue ?? 0}
        maximumValue={rest.maximumValue ?? 0}
        step={1}
        value={[priceLow, priceHigh]}
        onValueChange={updateRanges}
        renderAboveThumbComponent={renderAboveThumbComponent}
        minLabel={`€${rest.minimumValue ?? 0}`}
        maxLabel={`€${rest.maximumValue ?? 0}`}
      />

For me, a similar occurs when I forgot to put value in array of deps of onValueChange, in your example, check if priceLow and priceHigh are deps of updateRanges

unfortunately, adding them to the dependency array, did not solve the issue

You're right. Maybe we can fix that. I'll check if I can produce an PR.