Launch Week Day 3: Introducing Organization Notifications in Socket.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

rn-range-slider

Package Overview
Dependencies
Maintainers
1
Versions
33
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rn-range-slider - npm Package Compare versions

Comparing version
2.0.4
 to
2.1.0
+3
-3
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];

+9
-2
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,

+1
-1
package.json
{
"name": "rn-range-slider",
"version": "2.0.4",
"version": "2.1.0",
"author": "Tigran Sahakyan <mail.of.tigran@gmail.com>",

@@ -5,0 +5,0 @@ "description": "A highly optimized pure JS implementation of Range Slider for React Native",

+3
-0
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.

+4
-3
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: {