https://github.com/candlefinance/slider
A little (horizontal) animated slider component for React Native.
https://github.com/candlefinance/slider
expo react-native react-native-component slider slider-component slider-range
Last synced: 4 months ago
JSON representation
A little (horizontal) animated slider component for React Native.
- Host: GitHub
- URL: https://github.com/candlefinance/slider
- Owner: candlefinance
- License: mit
- Created: 2022-11-21T06:09:08.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-22T21:14:35.000Z (about 3 years ago)
- Last Synced: 2025-09-21T04:48:44.246Z (4 months ago)
- Topics: expo, react-native, react-native-component, slider, slider-component, slider-range
- Language: TypeScript
- Homepage: https://trycandle.com
- Size: 395 KB
- Stars: 21
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Slider
A little (horizontal) animated slider component for React Native. Inspired by [rn-vertical-slider](https://github.com/sacmii/rn-vertical-slider).
## Features
* Vanilla React Native animation API
* Compatible with Expo, try it out in the [snack](https://snack.expo.dev/@candlefinance/candle-slider-demo)
## Caveats
* This implementation of the pan gesture animation runs on the JS thread.
## Installation
```sh
yarn add @candlefinance/slider
```
## Usage
Check out the [example](./example/) project for a demo project.
```jsx
import Slider from '@candlefinance/slider';
{
console.log('CHANGE', value);
setMyValue(value);
}}
onComplete={(value) => {
console.log('COMPLETE', value);
}}
width={300}
height={54}
step={1}
maximumTrackTintColor="#c7c7c7"
minimumTrackTintColor="#ff0067"
ballIndicatorColor="#4f4f4f"
ballIndicatorTextColor="#ffffff"
/>
```
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT