https://github.com/sudhirkumarojhaa/react-native-slider-text
A react native component to show moving text along the slider thumb
https://github.com/sudhirkumarojhaa/react-native-slider-text
hactoberfest hactoberfest2020
Last synced: 6 months ago
JSON representation
A react native component to show moving text along the slider thumb
- Host: GitHub
- URL: https://github.com/sudhirkumarojhaa/react-native-slider-text
- Owner: sudhirkumarojhaa
- License: mit
- Created: 2020-06-25T20:12:51.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-10-07T09:02:12.000Z (about 5 years ago)
- Last Synced: 2025-04-07T20:52:00.777Z (6 months ago)
- Topics: hactoberfest, hactoberfest2020
- Language: JavaScript
- Homepage:
- Size: 120 KB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native Slider Text
Read more about this package [here](https://medium.com/@sudhirKr/react-native-slider-text-7f5054f733dd).
[](http://npm-stats.com/~packages/react-native-slider-text)
[](https://www.npmjs.com/package/react-native-slider-text)
[](https://yarnpkg.com/en/package/react-native-slider-text)
A React Native Slider Component which is built around [react-native-slider](https://github.com/react-native-community/react-native-slider) providing the user ability to add moving slider value alongside the slider thumb. You can also add custom labels displaying the start text and end text below the slider.
# Prerequisites
Kindly install @react-native-community/slider before you start using this component.
```
yarn add @react-native-community/slider
```
### Using React Native CLI
## Install
```
yarn add react-native-slider-text
```
or
```
npm install react-native-slider-text --save
```
## Usage
```jsx
import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SliderText from 'react-native-slider-text';
const Score = () => {
const [sliderValue, setSliderValue] = useState(0);
return (
Little interest or pleasure in doing things?
Rate your answer here:
setSliderValue(id)} sliderValue={sliderValue} />
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
},
title: {
fontSize: 24,
fontWeight: 'bold',
},
tag: {
fontSize: 14,
paddingVertical: 10,
},
});
export default Score;
```
## Props
| Prop | Description | Default |
| --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
| **`maximumValue`** | Add the maximum value of the slider here. (Number) | `10` |
| **`minimumValue`** | Add the minimum value of the slider here. (Number) | `0` |
| **`stepValue`** | Step value of the slider (Number) | `1` |
| **`value`** | value of the slider (Number) | `1` |
| **`sliderValue`** | dynamic value of the slider (Number) | `1` |
| **`multiplier`** | This is the universal logic to adjust the text location over the thumb. User may need to manipulate it depending on the maximum value. (Decimal value) | 1.12 |
| **`minimumTrackTintColor`** | Custom color for minimum slider progress. (color) | `#000` |
| **`thumbTintColor`** | Custom color for thumb. (color) | `#000` |
| **`maximumTrackTintColor`** | Custom color for maximum slider progress. (color) | `#000` |
| **`customCountStyle`** | Customize moving text slider value. You can add any styles related to Text Component in React Native. (style) | `-` |
| **`customLabelStyle`** | Customize label style below the slider. You can add any styles related to Text Component in React Native. (style) | `-` |
| **`onValueChange`** | function to manage the slider value on change of the slider thumb position. (function) | `-` |
## License
Licensed under the [MIT](https://github.com/vikrantnegi/react-native-slider-text/blob/master/LICENSE).
## Donation
If this project helped you reduce time to develop, please consider buying me a cup of coffee :)
[](https://ko-fi.com/E1E6Z0JL)