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
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
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
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.