
Security News
Node.js Moves Toward Stable TypeScript Support with Amaro 1.0
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
react-native-multi-slider
Advanced tools
Pure JS slider component with multiple markers for React Native
Note: Anyone using RN <=0.18 should use version 0.2.5
Pure JS react native slider component with one or two markers. Options to customise track, touch area and provide customer markers and callbacks for touch events and value changes.
Open iOS/Slider.xcodeproj
with Xcode, then press Cmd + R
; you may edit index.ios.js
to try building your own custom sliders. Feel free to make a PR if you are particularly proud of your slider and want it to feature. (Shortcut npm run open:xcode
)
$ npm i react-native-multi-slider --save
Prop | Default | Type | Description |
---|---|---|---|
values | [0] | array | An array containing one or two values (determines one or two markers respectively) that are the initial marker values. Note these must be possible values from your set up. |
min | 0 | number | Slider min value corresponding to far left |
max | 10 | number | Slider max value corresponding to far right |
step | 1 | number | The step size between values. Make sure min max range is divisible by this to get expected results |
optionsArray | - | array | Array of values corresponding to the slider's position (left to right on slider index 0 to end respectively). Values of any type can be inserted and the slider will simply give them back in the callbacks |
Prop | Default | Type | Description |
---|---|---|---|
onValuesChangeStart | console.log... | function() | Function to be called at beginning of press |
onValuesChange | console.log... | function(valuesArray) | Function called after every change in value, with current values passed in as an array. |
onValuesChangeFinish | console.log... | function(valuesArray) | Function called on end of press with final values passed in as an array |
Prop | Default | Type | Description |
---|---|---|---|
sliderLength | 280 | number | Width of track |
touchDimensions | { height: 30, width: 30, borderRadius: 15, slipDisplacement: 30 } , | object | Area to be touched, should enclose the whole marker. Will be automatically centered and contain the marker. Slip displacement If finger leaves the marker measures distance before responder cuts out and changes are no longer registered, if not given marker will be active until pressed released. |
sliderOrientation | horizontal | horizontal or vertical | TODO |
Prop | Default | Type | Description |
---|---|---|---|
containerStyle | {height:30} | object | Style of sliders container, note be careful in applying styles that may affect the children's (i.e. the slider's) positioning |
trackStyle | { borderRadius: 7, height: 3.5 } | object | Customise the track |
selectedStyle | {backgroundColor: 'blue'} | object | Style for the track up to a single marker or between double markers |
unselectedStyle | {backgroundColor: 'grey'} | object | Style for remaining track |
markerStyle | { height:30, width: 30, borderRadius: 15, backgroundColor:'#E8E8E8', borderWidth: 0.5, borderColor: 'grey'} | object | Customise the marker's style |
pressedMarkerStyle | {backgroundColor:'#D3D3D3'} | object | Style to be given to marker when pressed |
Feel free to create an issue x
FAQs
Pure JS slider component with multiple markers for React Native
The npm package react-native-multi-slider receives a total of 286 weekly downloads. As such, react-native-multi-slider popularity was classified as not popular.
We found that 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 2 open source maintainers 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.
Security News
Amaro 1.0 lays the groundwork for stable TypeScript support in Node.js, bringing official .ts loading closer to reality.
Research
A deceptive PyPI package posing as an Instagram growth tool collects user credentials and sends them to third-party bot services.
Product
Socket now supports pylock.toml, enabling secure, reproducible Python builds with advanced scanning and full alignment with PEP 751's new standard.