TrackTintColor not updated when value updated outside of component.

[CorentinClabaut]

When the value is updated outside of the component, the thumb are updated correctly, but the max/minTrackTintColor is not updated.

That is the case with an array of 2 values. I didn't try with another number of values.

[patrickacioli]

I can check that issue doesn't occurs in web version. Only android and iOS.

[andremawad]

I don't now if you're still facing this issue but you can try patch:

diff --git a/node_modules/@miblanchard/react-native-slider/lib/index.js b/node_modules/@miblanchard/react-native-slider/lib/index.js
index 379639a..e146eac 100644
--- a/node_modules/@miblanchard/react-native-slider/lib/index.js
+++ b/node_modules/@miblanchard/react-native-slider/lib/index.js
@@ -138,23 +138,39 @@ export class Slider extends PureComponent {
             return statePatch;
         }
     }
-    componentDidUpdate() {
-        const newValues = normalizeValue(this.props, this.props.value instanceof Animated.Value
-            ? this.props.value.__getValue()
-            : this.props.value);
-        newValues.forEach((value, i) => {
-            if (!this.state.values[i]) {
-                this._setCurrentValue(value, i);
-            }
-            else if (value !== this.state.values[i].__getValue()) {
-                if (this.props.animateTransitions) {
-                    this._setCurrentValueAnimated(value, i);
-                }
-                else {
-                    this._setCurrentValue(value, i);
-                }
-            }
-        });
+    componentDidUpdate(prevProps) {
+         // Check if the value prop has changed
+        if (this.props.value !== prevProps.value) {
+            const newValues = normalizeValue(this.props, this.props.value);
+
+            this.setState({
+                values: updateValues({
+                    values: this.state.values,
+                    newValues: newValues,
+                }),
+            }, () => {
+                newValues.forEach((value, i) => {
+                    const currentValue = this.state.values[i].__getValue();
+                    if (value !== currentValue && this.props.animateTransitions) {
+                        this._setCurrentValueAnimated(value, i);
+                    } else {
+                        this._setCurrentValue(value, i);
+                    }
+                });
+            });
+        }
+
+        // Check for other prop changes that might require state updates, e.g., trackMarks
+        if (this.props.trackMarks !== prevProps.trackMarks) {
+            const newTrackMarksValues = normalizeValue(this.props, this.props.trackMarks);
+
+            this.setState({
+                trackMarksValues: updateValues({
+                    values: this.state.trackMarksValues,
+                    newValues: newTrackMarksValues,
+                }),
+            });
+        }
     }
     _getRawValues(values) {
         return values.map((value) => value.__getValue());

[antoinerousseau]

@andremawad I opened #421 with your patch (it works for me)

[kaifcodeadict]

<Slider
minimumTrackTintColor={Colors.themeColor}
maximumTrackTintColor={Colors.gray}
minimumValue={0}
maximumValue={100}
thumbTintColor={Colors.themeColor}
trackStyle={{backgroundColor:Colors.gray}}
value={[low,high]}
onValueChange={([low,high]) => {
console.log(parseInt(low),parseInt(high));
setLow(parseInt(low));
setHigh(parseInt(high));
}}
/>