fix(slider-native): address styling override issue

fix(range-slider-native): address styling override issue

Author: MxKevinBeqo

packages/pluggableWidgets/range-slider-native/src/RangeSlider.tsx

@@ -65,9 +65,9 @@ export function RangeSlider(props: Props): ReactElement {
                 step={validProps ? toNumber(props.stepSize) ?? 1 : 1}
                 disabled={!isEnabled}
                 trackStyle={isEnabled ? styles.track : styles.trackDisabled}
-                minimumTrackStyle={isEnabled ? styles.minimumTrack : styles.minimumTrackDisabled}
-                maximumTrackStyle={isEnabled ? styles.maximumTrack : styles.maximumTrackDisabled}
-                thumbStyle={isEnabled ? styles.thumb : styles.thumbDisabled}
+                minimumTrackStyle={isEnabled ? styles.highlight : styles.highlightDisabled}
+                maximumTrackStyle={isEnabled ? styles.track : styles.tracktDisabled}
+                thumbStyle={isEnabled ? styles.marker : styles.markerDisabled}
                 onValueChange={onValueChange}
                 onSlidingComplete={onSlidingComplete}
             />

packages/pluggableWidgets/range-slider-native/src/ui/Styles.ts

@@ -5,13 +5,11 @@ export interface RangeSliderStyle extends Style {
     container: ViewStyle;
     track: ViewStyle;
     trackDisabled: ViewStyle;
-    minimumTrack: ViewStyle;
-    minimumTrackDisabled: ViewStyle;
-    maximumTrack: ViewStyle;
-    maximumTrackDisabled: ViewStyle;
-    thumb: ViewStyle;
-    thumbActive: ViewStyle;
-    thumbDisabled: ViewStyle;
+    highlight: ViewStyle;
+    highlightDisabled: ViewStyle;
+    marker: ViewStyle;
+    markerActive: ViewStyle;
+    markerDisabled: ViewStyle;
     validationMessage: TextStyle;
 }
 
@@ -40,12 +38,10 @@ export const defaultRangeSliderStyle: RangeSliderStyle = {
     container: {},
     track: trackBase,
     trackDisabled: { ...trackBase, opacity: 0.4 },
-    minimumTrack: { backgroundColor: blue },
-    minimumTrackDisabled: { backgroundColor: blue },
-    maximumTrack: { backgroundColor: "#E7E7E7" },
-    maximumTrackDisabled: { backgroundColor: "#E7E7E7" },
-    thumb: thumbBase,
-    thumbActive: thumbBase,
-    thumbDisabled: thumbBase,
+    highlight: { backgroundColor: blue },
+    highlightDisabled: { backgroundColor: blue },
+    marker: thumbBase,
+    markerActive: { ...thumbBase, backgroundColor: blue },
+    markerDisabled: thumbBase,
     validationMessage: { color: "#ed1c24" }
 };

packages/pluggableWidgets/slider-native/src/Slider.tsx

@@ -60,9 +60,9 @@ export function Slider(props: Props): ReactElement {
                 step={validProps ? toNumber(props.stepSize) ?? 1 : 1}
                 disabled={!editable}
                 trackStyle={editable ? styles.track : styles.trackDisabled}
-                minimumTrackStyle={editable ? styles.minimumTrack : styles.minimumTrackDisabled}
-                maximumTrackStyle={editable ? styles.maximumTrack : styles.maximumTrackDisabled}
-                thumbStyle={editable ? styles.thumb : styles.thumbDisabled}
+                minimumTrackStyle={editable ? styles.highlight : styles.highlightDisabled}
+                maximumTrackStyle={editable ? styles.track : styles.trackDisabled}
+                thumbStyle={editable ? styles.marker : styles.markerDisabled}
                 onValueChange={onValueChange}
                 onSlidingComplete={onSlidingComplete}
             />

packages/pluggableWidgets/slider-native/src/ui/Styles.ts

@@ -5,12 +5,10 @@ export interface SliderStyle extends Style {
     container: ViewStyle;
     track: ViewStyle;
     trackDisabled: ViewStyle;
-    minimumTrack: ViewStyle;
-    minimumTrackDisabled: ViewStyle;
-    maximumTrack: ViewStyle;
-    maximumTrackDisabled: ViewStyle;
-    thumb: ViewStyle;
-    thumbDisabled: ViewStyle;
+    highlight: ViewStyle;
+    highlightDisabled: ViewStyle;
+    marker: ViewStyle;
+    markerDisabled: ViewStyle;
     validationMessage: TextStyle;
 }
 
@@ -39,11 +37,9 @@ export const defaultSliderStyle: SliderStyle = {
     container: {},
     track: trackBase,
     trackDisabled: { ...trackBase, opacity: 0.4 },
-    minimumTrack: { backgroundColor: blue },
-    minimumTrackDisabled: { backgroundColor: blue },
-    maximumTrack: { backgroundColor: "#E7E7E7" },
-    maximumTrackDisabled: { backgroundColor: "#E7E7E7" },
-    thumb: thumbBase,
-    thumbDisabled: thumbBase,
+    highlight: { backgroundColor: blue },
+    highlightDisabled: { backgroundColor: blue },
+    marker: thumbBase,
+    markerDisabled: thumbBase,
     validationMessage: { color: "#ed1c24" }
 };