
Research
Two Malicious Rust Crates Impersonate Popular Logger to Steal Wallet Keys
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
@3beeepb/react-native-range-slider
Advanced tools
Cross Platform (iOS / Android) implementation of Range Slider for React Native
A cross-platform (iOS / Android) implementation of Range Slider for React Native.
npm install --save @3beeepb/react-native-range-slider --save
RangeSlider uses react hooks, so this component doesn't work with React Native versions below 0.59.0
Import the library
import RangeSlider from '@3beeepb/react-native-range-slider';
Just use it like this:
Handler callback
const handleValueChange = useCallback((low, high, isUpdate) => {
if (isUpdate) {
setLow(low);
setHigh(high);
}
}, []);
const handleChange = useCallback(() => {
// release thumb
}, []);
JSX
<Slider
style={styles.slider}
min={0}
max={100}
onChange={handleChange}
onValueChanged={handleValueChange}
/>
Name | Description | Type | Default Value |
---|---|---|---|
min | Minimum value of slider | number | required |
max | Maximum value of slider | number | required |
step | Step of slider | number | 1 |
low | Low value of slider | number | Initially min value will be set if not provided |
high | High value of slider | number | Initially max value will be set if not provided |
floatingLabel | If set to true , labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup). | boolean | false |
disableRange | Slider works as an ordinary slider with only one control if true | boolean | false |
disabled | Any user interactions will be ignored if true | boolean | false |
allowLabelOverflow | If set to true , labels are allowed to be drawn outside of slider component's bounds.Otherwise label's edges will never get out of component's edges. | boolean | false |
renderThumb | Should render the thumb. | () => Node | undefined |
renderRail | Should render the "rail" for thumbs. Rendered component should have flex: 1 style so it won't fill up the whole space. | () => Node | undefined |
renderRailSelected | Should render the selected part of "rail" for thumbs. Rendered component should not have flex: 1 style so it fills up the whole space. | () => Node | undefined |
renderLabel | Should render label above thumbs. If no function is passed, no label will be drawn. | (value: number) => Node | undefined |
renderNotch | Should render the notch below the label (above the thumbs). Classic notch is a small triangle below the label. If allowLabelOverflow is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further. | () => Node | undefined |
onValueChanged | Will be called when a value was changed. If disableRange is set to true, the second argument should be ignored.isUpdate will be true if the value was changed by user's interaction. | (low: number, high: number, isUpdate: boolean) => void | undefined |
onChanged | Will be called when a user release thumb. | () => void | undefined |
All the other props (e.g. style) will be passed to root container component.
Please make sure to run the tests before proposing a PR by running npm test
.
FAQs
Cross Platform (iOS / Android) implementation of Range Slider for React Native
The npm package @3beeepb/react-native-range-slider receives a total of 44 weekly downloads. As such, @3beeepb/react-native-range-slider popularity was classified as not popular.
We found that @3beeepb/react-native-range-slider demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Socket uncovers malicious Rust crates impersonating fast_log to steal Solana and Ethereum wallet keys from source code.
Research
A malicious package uses a QR code as steganography in an innovative technique.
Research
/Security News
Socket identified 80 fake candidates targeting engineering roles, including suspected North Korean operators, exposing the new reality of hiring as a security function.