@sharcoux/slider - npm Package Compare versions

Comparing version 5.2.2 to 5.3.0

dist/RangeSlider.d.ts

@@ -14,2 +14,5 @@ import React from 'react';
     trackStyle?: RN.StyleProp<RN.ViewStyle>;
+    minTrackStyle?: RN.StyleProp<RN.ViewStyle>;
+    midTrackStyle?: RN.StyleProp<RN.ViewStyle>;
+    maxTrackStyle?: RN.StyleProp<RN.ViewStyle>;
     style?: RN.StyleProp<RN.ViewStyle>;
@@ -38,2 +41,5 @@ inverted?: boolean;
     trackStyle?: RN.StyleProp<RN.ViewStyle>;
+    minTrackStyle?: RN.StyleProp<RN.ViewStyle>;
+    midTrackStyle?: RN.StyleProp<RN.ViewStyle>;
+    maxTrackStyle?: RN.StyleProp<RN.ViewStyle>;
     style?: RN.StyleProp<RN.ViewStyle>;
@@ -40,0 +46,0 @@ inverted?: boolean | undefined;

dist/RangeSlider.js

@@ -13,3 +13,3 @@ "use strict";
 const Slider = react_1.default.forwardRef((props, forwardedRef) => {
-    const { minimumValue = 0, maximumValue = 1, range: propValue = [minimumValue, minimumValue], step = 0, outboundColor = 'grey', inboundColor = 'blue', thumbTintColor = 'darkcyan', thumbStyle, trackStyle, style, inverted = false, vertical = false, enabled = true, slideOnTap = true, trackHeight = 4, thumbSize = 15, minimumRange = step, crossingAllowed = false, onValueChange, onSlidingStart, onSlidingComplete, ...others } = props;
+    const { minimumValue = 0, maximumValue = 1, range: propValue = [minimumValue, minimumValue], step = 0, outboundColor = 'grey', inboundColor = 'blue', thumbTintColor = 'darkcyan', thumbStyle, trackStyle, minTrackStyle, midTrackStyle, maxTrackStyle, style, inverted = false, vertical = false, enabled = true, slideOnTap = true, trackHeight = 4, thumbSize = 15, minimumRange = step, crossingAllowed = false, onValueChange, onSlidingStart, onSlidingComplete, ...others } = props;
     const { updateClosestValue, updateMaxValue, range, canMove } = useRange_1.default({
@@ -30,10 +30,15 @@ minimumRange,
     const thumbRadius = Math.min(trackHeight, thumbSize);
+    const { minStyle, midStyle, maxStyle } = react_1.default.useMemo(() => ({
+        minStyle: (trackStyle && minTrackStyle) ? [trackStyle, minTrackStyle] : trackStyle || minTrackStyle,
+        midStyle: (trackStyle && midTrackStyle) ? [trackStyle, midTrackStyle] : trackStyle || midTrackStyle,
+        maxStyle: (trackStyle && maxTrackStyle) ? [trackStyle, maxTrackStyle] : trackStyle || maxTrackStyle
+    }), [trackStyle, minTrackStyle, maxTrackStyle]);
     return (react_1.default.createElement(ResponderView_1.default, Object.assign({ style: style, ref: forwardedRef, maximumValue: maximumValue, minimumValue: minimumValue, step: step, value: range[1], updateValue: updateMaxValue, onPress: onPress, onMove: onMove, onRelease: onRelease, enabled: enabled, vertical: vertical, inverted: inverted }, others),
-        react_1.default.createElement(Track_1.default, { color: outboundColor, style: trackStyle, length: minTrackPct * 100, vertical: vertical, thickness: trackHeight }),
+        react_1.default.createElement(Track_1.default, { color: outboundColor, style: minStyle, length: minTrackPct * 100, vertical: vertical, thickness: trackHeight }),
         react_1.default.createElement(Thumb_1.default, { size: thumbSize, color: thumbTintColor, trackHeight: thumbRadius, style: thumbStyle }),
-        react_1.default.createElement(Track_1.default, { color: inboundColor, style: trackStyle, length: (maxTrackPct - minTrackPct) * 100, vertical: vertical, thickness: trackHeight }),
+        react_1.default.createElement(Track_1.default, { color: inboundColor, style: midStyle, length: (maxTrackPct - minTrackPct) * 100, vertical: vertical, thickness: trackHeight }),
         react_1.default.createElement(Thumb_1.default, { size: thumbSize, color: thumbTintColor, trackHeight: thumbRadius, style: thumbStyle }),
-        react_1.default.createElement(Track_1.default, { color: outboundColor, style: trackStyle, length: (1 - maxTrackPct) * 100, vertical: vertical, thickness: trackHeight })));
+        react_1.default.createElement(Track_1.default, { color: outboundColor, style: maxStyle, length: (1 - maxTrackPct) * 100, vertical: vertical, thickness: trackHeight })));
 });
 Slider.displayName = 'Slider';
 exports.default = Slider;

dist/Slider.d.ts

@@ -13,2 +13,4 @@ import React from 'react';
     trackStyle?: RN.StyleProp<RN.ViewStyle>;
+    minTrackStyle?: RN.StyleProp<RN.ViewStyle>;
+    maxTrackStyle?: RN.StyleProp<RN.ViewStyle>;
     style?: RN.StyleProp<RN.ViewStyle>;
@@ -35,2 +37,4 @@ inverted?: boolean;
     trackStyle?: RN.StyleProp<RN.ViewStyle>;
+    minTrackStyle?: RN.StyleProp<RN.ViewStyle>;
+    maxTrackStyle?: RN.StyleProp<RN.ViewStyle>;
     style?: RN.StyleProp<RN.ViewStyle>;
@@ -37,0 +41,0 @@ inverted?: boolean | undefined;

dist/Slider.js

@@ -13,3 +13,3 @@ "use strict";
 const Slider = react_1.default.forwardRef((props, forwardedRef) => {
-    const { minimumValue = 0, maximumValue = 1, value: propValue = minimumValue, step = 0, minimumTrackTintColor = 'grey', maximumTrackTintColor = 'grey', thumbTintColor = 'darkcyan', thumbStyle, trackStyle, style, inverted = false, vertical = false, enabled = true, slideOnTap = true, trackHeight = 4, thumbSize = 15, onValueChange, onSlidingStart, onSlidingComplete, ...others } = props;
+    const { minimumValue = 0, maximumValue = 1, value: propValue = minimumValue, step = 0, minimumTrackTintColor = 'grey', maximumTrackTintColor = 'grey', thumbTintColor = 'darkcyan', thumbStyle, trackStyle, minTrackStyle, maxTrackStyle, style, inverted = false, vertical = false, enabled = true, slideOnTap = true, trackHeight = 4, thumbSize = 15, onValueChange, onSlidingStart, onSlidingComplete, ...others } = props;
     const { updateValue, value, canMove } = useThumb_1.default({
@@ -29,8 +29,12 @@ minimumValue,
     const thumbRadius = Math.min(trackHeight, thumbSize);
+    const { minStyle, maxStyle } = react_1.default.useMemo(() => ({
+        minStyle: (trackStyle && minTrackStyle) ? [trackStyle, minTrackStyle] : trackStyle || minTrackStyle,
+        maxStyle: (trackStyle && maxTrackStyle) ? [trackStyle, maxTrackStyle] : trackStyle || maxTrackStyle
+    }), [trackStyle, minTrackStyle, maxTrackStyle]);
     return (react_1.default.createElement(ResponderView_1.default, Object.assign({ style: responderStyle, ref: forwardedRef, maximumValue: maximumValue, minimumValue: minimumValue, step: step, value: value, updateValue: updateValue, onPress: onPress, onMove: onMove, onRelease: onRelease, enabled: enabled, vertical: vertical, inverted: inverted }, others),
-        react_1.default.createElement(Track_1.default, { color: minimumTrackTintColor, style: trackStyle, length: percentage * 100, vertical: vertical, thickness: trackHeight }),
+        react_1.default.createElement(Track_1.default, { color: minimumTrackTintColor, style: minStyle, length: percentage * 100, vertical: vertical, thickness: trackHeight }),
         react_1.default.createElement(Thumb_1.default, { size: thumbSize, color: thumbTintColor, trackHeight: thumbRadius, style: thumbStyle }),
-        react_1.default.createElement(Track_1.default, { color: maximumTrackTintColor, style: trackStyle, length: (1 - percentage) * 100, vertical: vertical, thickness: trackHeight })));
+        react_1.default.createElement(Track_1.default, { color: maximumTrackTintColor, style: maxStyle, length: (1 - percentage) * 100, vertical: vertical, thickness: trackHeight })));
 });
 Slider.displayName = 'Slider';
 exports.default = Slider;

package.json

 {
   "name": "@sharcoux/slider",
-  "version": "5.2.2",
+  "version": "5.3.0",
   "homepage": "https://github.com/Sharcoux/slider",
@@ -5,0 +5,0 @@ "description": "Lightweight slider for React-Native and React-Native-Web. A Range slider is included",

README.md

@@ -39,2 +39,4 @@ # React Native Slider
   trackStyle={undefined}            // Override the tracks' style
+  minTrackStyle={undefined}         // Override the tracks' style for the minimum range
+  maxTrackStyle={undefined}         // Override the tracks' style for the maximum range
   vertical={false}                  // If true, the slider will be drawn vertically
@@ -72,2 +74,5 @@ inverted={false}                  // If true, min value will be on the right, and max on the left
   trackStyle={undefined}            // Override the tracks' style
+  minTrackStyle={undefined}         // Override the tracks' style for the minimum range
+  midTrackStyle={undefined}         // Override the tracks' style for the middle range
+  maxTrackStyle={undefined}         // Override the tracks' style for the maximum range
   vertical={false}                  // If true, the slider will be drawn vertically
@@ -94,2 +99,8 @@ inverted={false}                  // If true, min value will be on the right, and max on the left
 
+### Changelog V 5.3.0:
+
+ * new `minTrackStyle` prop on Slider and RangeSlider
+ * new `maxTrackStyle` prop on Slider and RangeSlider
+ * new `midTrackStyle` prop on RangeSlider
+
 ### Changelog V 5.2.0:
@@ -96,0 +107,0 @@

No alert changes

Improved metrics

Total package byte prevSize

64054

increased by4.94%

Lines of code

1223

increased by3.21%

Number of lines in readme file

119

increased by10.19%

No dependency changes