Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/kdn0325/react-native-gradient-multi-slider
Do you want to make sliders using Gradient in React Native? This library makes it easy to make
https://github.com/kdn0325/react-native-gradient-multi-slider
react-native react-native-gradient react-native-slider
Last synced: 25 days ago
JSON representation
Do you want to make sliders using Gradient in React Native? This library makes it easy to make
- Host: GitHub
- URL: https://github.com/kdn0325/react-native-gradient-multi-slider
- Owner: kdn0325
- License: mit
- Created: 2024-02-06T14:56:55.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2024-03-11T13:08:02.000Z (8 months ago)
- Last Synced: 2024-09-28T18:43:16.919Z (about 1 month ago)
- Topics: react-native, react-native-gradient, react-native-slider
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-native-gradient-multi-slider
- Size: 3.32 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG
- License: LICENSE
Awesome Lists containing this project
README
# react-native-gradient-multi-slider
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.
## Examples
```
cd example/Basic
npm install
react-native run-ios
react-native run-android
```
## Getting Started
- [Installation](#installation)
### Installation
```bash
$ npm install --save react-native-gradient-multi-slider
$ yarn add -D react-native-gradient-multi-slider
```
### Usage in a ScrollView
```js
import MultiSlider from 'react-native-gradient-multi-slider';
```
### shape up CustomMarker as left and right
In order to make different styles on markers you can set isMarkersSeparated to true, define customMarkerLeft and customMarkerRight in MultiSlider. for example:
```js
{
return ()
}}
customMarkerRight={(e) => {
return ()
}}
/>
```
### Partial report of the props
Feel free to contribute to this part of the documentation.
| Prop Name | Default | Type | Purpose |
|----------------------|---------|---------|------------------------------------------|
| values | [0] | Array | Prefixed values of the slider |
| gradientColors | #... | Array | Gradient colors for slider track |
| onValuesChangeStart | () => {}| Function| Callback when value starts changing |
| onValuesChange | () => {}| Function| Callback when value changes |
| onValuesChangeFinish| () => {}| Function| Callback when value stops changing |
| sliderLength | 280 | Number | Length of the slider |
| touchDimensions | {...} | Object | Touch dimensions configuration |
| enableLabel | | Function| Enable label rendering |
| customLabel | | Function| Component for rendering label above |
| customMarker | | Function| Component for cursor |
| customMarkerLeft | | Function| Component for left cursor |
| customMarkerRight | | Function| Component for right cursor |
| isMarkersSeparated | | Boolean | Explanation in README.md |
| min | 0 | Number | Minimum value available in slider |
| max | 10 | Number | Maximum value available in slider |
| step | 1 | Number | Step value of slider |
| optionsArray | | Array | Possible values of slider |
| Styles | {...} | Style | Slider styles |
| valuePrefix | | String | Prefix added to value |
| valueSuffix | | String | Suffix added to value |
| enabledOne | true | Boolean | Enables first cursor |
| enabledTwo | true | Boolean | Enables second cursor |
| stepsAs | [] | Array | Customize step labels |
| showSteps | false | Boolean | Show steps |
| showStepMarkers | true | Boolean | Show step markers on track |
| showStepLabels | true | Boolean | Show step labels underneath track |
| onToggleOne | | Function| Listener when first cursor toggles |
| onToggleTwo | | Function| Listener when second cursor toggles |
| allowOverlap | false | Boolean | Allow overlap within cursors |
| snapped | false | Boolean | Fixed position for markers |
| smoothSnapped | false | Boolean | Snap to nearest marker on release |
| vertical | false | Boolean | Use vertical orientation |
| markerOffsetX | 0 | Number | Offset cursor(s) on X axis |
| markerOffsetY | 0 | Number | Offset cursor(s) on Y axis |
| markerSize | 0 | Number | Marker margin from track edges |
| minMarkerOverlap... | 0 | Number | Closest distance between markers (pixels)|
| imageBackground... | | String | ImageBackground source |
| testID | | String | Used in end-to-end tests