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.
@ptomasroos/react-native-multi-slider
Advanced tools
Readme
Pure JS react native slider component with one or two markers. Options to customize track, touch area and provide customer markers and callbacks for touch events and value changes.
cd example/Basic
npm install
react-native run-ios
react-native run-android
$ npm install --save @ptomasroos/react-native-multi-slider
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 | (?) |
enableLabel | function | Enable the label rendering | |
customLabel | function | Component used for rendering a label above the cursors. | |
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 | See explaination above in the README.md | |
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 of numbers | Possible values of the slider. Ignores min and max. | |
{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 | Use this when you want a fixed position for your markers, this will split the slider in N specific positions |
vertical | false | boolean | Use vertical orientation instead of horizontal. |
markerOffsetX | 0 | number | Offset first cursor. |
markerOffsetY | 0 | number | Offset second cursor. |
minMarkerOverlapDistance | 0 | number | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other. This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. |
imageBackgroundSource | undefined | string | Specifies the source as required by ImageBackground |
FAQs
Android and iOS supported pure JS slider component with multiple markers for React Native
The npm package @ptomasroos/react-native-multi-slider receives a total of 39,570 weekly downloads. As such, @ptomasroos/react-native-multi-slider popularity was classified as popular.
We found that @ptomasroos/react-native-multi-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.
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.