Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-native-range
Advanced tools
Readme
Pure JS react native range slider component with one or two markers / thumbs. Options to customize track, touch area and provide customer markers and callbacks for touch events and value changes.
cd example
npm install
react-native run-ios
react-native run-android
$ npm install --save react-native-range
enableScroll = () => this.setState({ scrollEnabled: true });
disableScroll = () => this.setState({ scrollEnabled: false });
render() {
return (
<ScrollView scrollEnabled={this.state.scrollEnabled}>
<MultiSlider
...
onValuesChangeStart={this.disableScroll}
onValuesChangeFinish={this.enableScroll}
/>
</ScrollView>
);
In order to make different styles on markers you can set isMarkersSeparated to true, define customMarkerLeft and customMarkerRight in MultiSlider. for example:
<MultiSlider
...
isMarkersSeparated={true}
customMarkerLeft={(e) => {
return (<CustomSliderMarkerLeft
currentValue={e.currentValue}/>)
}}
customMarkerRight={(e) => {
return (<CustomSliderMarkerRight
currentValue={e.currentValue}/>)
}}
/>
Feel free to contribute to this part of the documentation.
Prop name | Default value | Type | Purpouse |
---|---|---|---|
values | [0] | array of numbers | Prefixed values of the slider. |
onValuesChangeStart | () => {} | function | Callback when the value starts changing |
onValuesChange | () => {} | function | Callback when the value changes |
onValuesChangeFinish | (values) => {} | function | Callback when the value stops changing |
sliderLength | 280 | number | Length of the slider (?) |
touchDimensions | {height: 50,width: 50,borderRadius: 15,slipDisplacement: 200} | object | (?) |
customMarker | function | Component used for the cursor. | |
customMarkerLeft | function | Component used for the left cursor. | |
customMarkerRight | function | Component used for the right cursor. | |
isMarkersSeparated | boolean | (?) | |
min | 0 | number | Minimum value available in the slider. |
max | 10 | number | Maximum value available in the slider. |
step | 1 | number | Step value of the slider. |
optionsArray | array | (?) | |
{container/track/selected/unselected/ markerContainer/marker/pressedMarker} Style | style object | Styles for the slider | |
valuePrefix | string | Prefix added to the value. | |
valueSuffix | string | Suffix added to the value. | |
enabledOne | true | boolean | Enables the first cursor |
enabledTwo | true | boolean | Enables the second cursor |
onToggleOne | undefined | function callback | Listener when first cursor toggles. |
onToggleTwo | undefined | function callback | Listener when second cursor toggles. |
allowOverlap | false | boolean | Allow the overlap within the cursors. |
snapped | false | boolean | (?) |
markerOffsetX | 0 | number | Offset first cursor. |
markerOffsetY | 0 | number | Offset second cursor. |
FAQs
Android and iOS supported pure js range slider component with multiple markers / thumbs for React Native
The npm package react-native-range receives a total of 10 weekly downloads. As such, react-native-range popularity was classified as not popular.
We found that react-native-range 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.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.