@5stones/react-native-slider
v1.1.1
Published
A truly simple react-native slider
Downloads
18
Readme
@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-slider
Usage
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
| :white_check_mark: | number
| A numeric value allowing between the minimumValue
and maximumValue
allowing you to control the position of the slider. |
| onValueChange
| :white_check_mark: | (value: number) => void
| A callback function allowing you to receive updates of the slider position. |
| thumbSize
| :white_check_mark: | number
| Specify the size of the thumb (this is important as it's used to calculate positions). |
| minimumValue
| :white_check_mark: | number
| The minimum bound of the sliders value. |
| maximumValue
| :white_check_mark: | number
| The maximum bound of the sliders value. |
| defaultContainerWidth
| :white_check_mark: | number
| A default value for the width of the container (which will get overwritten dynamically after layout). |
| touchableContainerStyle
| :white_check_mark: | ViewStyle
| A style object allowing you control over the touch target container. |
| containerStyle
| :white_check_mark: | ViewStyle
| A style object allowing you control over the container. |
| thumbStyle
| :white_check_mark: | ViewStyle
| A style object allowing you control over the thumb. |
| minimumTrackStyle
| :white_check_mark: | ViewStyle
| A style object allowing you control over the minimum track. |
| maximumTrackStyle
| :white_check_mark: | 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