miblanchard / react-native-slider

A pure JavaScript <Slider> component for react-native and react-native-web
MIT License
377 stars 67 forks source link

Fix bug with double thumb background color #414

Closed sfreeman28 closed 1 year ago

sfreeman28 commented 1 year ago

396

Fixes a bug when using double thumb slider and updating the slider value from an external input (eg TextField). The background color of the slider is not updating correctly, this PR fixes that issue.

Here is the patch-package patch file for those interested

diff --git a/node_modules/@miblanchard/react-native-slider/lib/index.js b/node_modules/@miblanchard/react-native-slider/lib/index.js
index 379639a..ff6cf06 100644
--- a/node_modules/@miblanchard/react-native-slider/lib/index.js
+++ b/node_modules/@miblanchard/react-native-slider/lib/index.js
@@ -442,6 +442,7 @@ export class Slider extends PureComponent {
         const minTrackWidth = _startFromZero
             ? Math.abs(_value) * sliderWidthCoefficient - thumbSize.width / 2
             : interpolatedTrackValues[0];
+        const maxTrackWidth = interpolatedTrackValues[1];
         const clearBorderRadius = {};
         if (_startFromZero && _value < 0 + step) {
             clearBorderRadius.borderBottomRightRadius = 0;
@@ -455,10 +456,10 @@ export class Slider extends PureComponent {
             position: 'absolute',
             left: interpolatedTrackValues.length === 1
                 ? new Animated.Value(startPositionOnTrack)
-                : Animated.add(minThumbValue, thumbSize.width / 2),
+                : Animated.add(minTrackWidth, thumbSize.width / 2),
             width: interpolatedTrackValues.length === 1
                 ? Animated.add(minTrackWidth, thumbSize.width / 2)
-                : Animated.add(Animated.multiply(minThumbValue, -1), maxThumbValue),
+                : Animated.add(Animated.multiply(minTrackWidth, -1), maxTrackWidth),
             backgroundColor: minimumTrackTintColor,
             ...valueVisibleStyle,
             ...clearBorderRadius,