rn-range-slider - npm Package Compare versions

Comparing version 2.0.4 to 2.1.0

hooks.js

 import React, { useCallback, useState, useRef, useMemo } from 'react';
-import { Animated } from 'react-native';
+import { Animated, I18nManager } from 'react-native';
 import { clamp } from './helpers';
@@ -122,4 +122,4 @@ import styles from './styles';
     position: 'absolute',
-    left,
-    right,
+    left: I18nManager.isRTL ? right : left,
+    right: I18nManager.isRTL ? left : right,
   }), [left, right]);
@@ -126,0 +126,0 @@ return [styles, update];

index.js

@@ -16,2 +16,3 @@ import React, { memo, useState, useEffect, useCallback, useMemo, useRef } from 'react';
     max,
+    minRange,
     step,
@@ -25,2 +26,4 @@ low: lowProp,
     onValueChanged,
+    onTouchStart,
+    onTouchEnd,
     renderThumb,
@@ -132,2 +135,3 @@ renderLabel,
       const { low, high, min, max } = inPropsRef.current;
+      onTouchStart?.(low, high);
       const containerWidth = containerWidthRef.current;
@@ -143,4 +147,4 @@
         const { low, high, min, max, step } = inPropsRef.current;
-        const minValue = isLow ? min : low;
-        const maxValue = isLow ? high : max;
+        const minValue = isLow ? min : low + minRange;
+        const maxValue = isLow ? high - minRange : max;
         const value = clamp(getValueForPosition(positionInView, containerWidth, thumbWidth, min, max, step), minValue, maxValue);
@@ -173,2 +177,4 @@ if (gestureStateRef.current.lastValue === value) {
       setPressed(false);
+      const { low, high } = inPropsRef.current;
+      onTouchEnd?.(low, high);
     },
@@ -224,2 +230,3 @@ }), [pointerX, inPropsRef, thumbWidth, disableRange, disabled, onValueChanged, setLow, setHigh, labelUpdate, notchUpdate, updateSelectedRail]);
 Slider.defaultProps = {
+  minRange: 0,
   allowLabelOverflow: false,
@@ -226,0 +233,0 @@ disableRange: false,

package.json

 {
   "name": "rn-range-slider",
-  "version": "2.0.4",
+  "version": "2.1.0",
   "author": "Tigran Sahakyan <[e-mail]>",
@@ -5,0 +5,0 @@ "description": "A highly optimized pure JS implementation of Range Slider for React Native",

README.md

@@ -73,2 +73,3 @@ # RangeSlider
 | `max` |  Maximum value of slider | number | _**required**_ |
+| `minRange` |  Minimum range of thumbs allowed to be selected **by the user**.<br/>**Note:** it is still possible to set values closer to each other than `minRange` programmatically.<br/>If `disableRange` is set to true, maximum value allowed for user will be `max` - `minRange`. | number | `0` |
 | `step` |  Step of slider | number | `1` |
@@ -87,2 +88,4 @@ | `low` |  Low value of slider | number | Initially `min` value will be set if not provided |
 | `onValueChanged` | Will be called when a value was changed.<br/>If `disableRange` is set to true, the second argument should be ignored.<br/>`fromUser` will be true if the value was changed by user's interaction. | `(low: number, high: number, fromUser: boolean) => void` | `undefined` |
+| `onTouchStart` | Will be called when user starts interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
+| `onTouchEnd` | Will be called when user ends interaction with slider.<br/>If `disableRange` is set to true, the second argument should be ignored. | `(low: number, high: number) => void` | `undefined` |
 
@@ -89,0 +92,0 @@ All the other props (e.g. style) will be passed to root container component.

styles.js

@@ -1,2 +0,2 @@
-import { StyleSheet } from 'react-native';
+import {I18nManager, StyleSheet} from 'react-native';
 
@@ -6,2 +6,3 @@ export default StyleSheet.create({
     flexDirection: 'row',
+    justifyContent: I18nManager.isRTL ? 'flex-end' : 'flex-start',
     alignItems: 'center',
@@ -18,3 +19,3 @@ },
   labelFixedContainer: {
-    alignItems: 'flex-start',
+    alignItems: I18nManager.isRTL ? 'flex-end' : "flex-start",
   },
@@ -25,3 +26,3 @@ labelFloatingContainer: {
     right: 0,
-    alignItems: 'flex-start',
+    alignItems: I18nManager.isRTL ? 'flex-end' : "flex-start",
   },
@@ -28,0 +29,0 @@ touchableArea: {

No alert changes

Improved metrics

Total package byte prevSize

23380

increased by5.1%

Lines of code

403

increased by2.03%

Number of lines in readme file

99

increased by3.13%

No dependency changes