@5stones/react-native-slider
A truly simple react-native slider.
Motivation
We needed a slider that was:
- Based on
react-native-gesture-handler. - Simple.
Every other slider is either based on react-native's gesture handler OR are several hundred lines of code and seemingly unnecessarily complex to debug. So we built a slider that was less than 200 lines of code and utilized react-native-gesture-handler.
Installation
npm install @5stones/react-native-sliderUsage
import React from 'react';
import { View } from 'react-native';
import Slider from "@5stones/react-native-slider";
const Screen: React.FC = () => {
return (
<View>
<Slider/>
</View>
);
};Props
| Name | Optional | Type | Description |
|---|---|---|---|
value |
number |
A numeric value allowing between the minimumValue and maximumValue allowing you to control the position of the slider. |
|
onValueChange |
(value: number) => void |
A callback function allowing you to receive updates of the slider position. | |
thumbSize |
number |
Specify the size of the thumb (this is important as it's used to calculate positions). | |
minimumValue |
number |
The minimum bound of the sliders value. | |
maximumValue |
number |
The maximum bound of the sliders value. | |
defaultContainerWidth |
number |
A default value for the width of the container (which will get overwritten dynamically after layout). | |
touchableContainerStyle |
ViewStyle |
A style object allowing you control over the touch target container. | |
containerStyle |
ViewStyle |
A style object allowing you control over the container. | |
thumbStyle |
ViewStyle |
A style object allowing you control over the thumb. | |
minimumTrackStyle |
ViewStyle |
A style object allowing you control over the minimum track. | |
maximumTrackStyle |
ViewStyle |
A style object allowing you control over the maximum track. |
Release
The standard release command for this project is:
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease | from-git]
This command will:
- Generate/update the Changelog
- Bump the package version
- Tag & pushing the commit to GitHub & NPM
e.g.
npm version 1.2.17
npm version patch // 1.2.17 -> 1.2.18
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT