# react-native-number-slider

> This component allows you to create a sliding number selector

Latest version **1.0.0** (published 2020-05-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-native-number-slider
pnpm add react-native-number-slider
yarn add react-native-number-slider
bun add react-native-number-slider
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-05-05 |
| First published | 2020-05-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 440.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Vamsi Abishek Pudoor |
| Maintainers | vamsiabishek |
| Keywords | react-native-number-slider, react-native, react-component, react-native-component, react, react native, mobile, ios, android, ui, npm, react-native-number-slider, number, slider |

## Links

- npm: https://www.npmjs.com/package/react-native-number-slider
- Repository: https://github.com/vamsiabishek/react-native-number-slider
- Homepage: https://github.com/vamsiabishek/react-native-number-slider#readme
- Issues: https://github.com/vamsiabishek/react-native-number-slider/issues
- npm.io page: https://npm.io/package/react-native-number-slider

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) 15.7.2

## Recent versions

- 1.0.0 (latest) — 2020-05-05

## README

# react-native-number-slider
Number slider component created in React Native

# Demo
<image src='demo/demo.gif' width='200'/>


## Installation

`$ npm install react-native-number-slider --save`


 width: PropTypes.number,
  displayValues: PropTypes.arrayOf(PropTypes.number),
  value: PropTypes.number,
  fontSize: PropTypes.number,
  containerBackground: PropTypes.string,
  selectedBackground: PropTypes.string,
  onValueChange: PropTypes.func.isRequired,

## How to use

### Common Props

| Prop | Type | Default | Description |
|---|---|---|---|
|**`width`**|Number|300|Width of the component.|
|**`displayValues`**|Array|[1,2,3,4,5]|Array of inputs that needs to be displayed.|
|**`value`**|Number|1|Selected value of the slider. This value will be applied to the Slider and change it's state on every render. Use this prop if you want a [Controlled Component](https://facebook.github.io/react/docs/forms.html#controlled-components).|
|**`onValueChange`**|Function||The method that gives you the value of selected number every time it is changed.|
|**`fontSize`**|Number|15|Font size style property for the display numbers.|
|**`containerBackground`**|String|'#F1F2F6'|The background color of unselected area of the slider.|
|**`selectedBackground`**|String|#FA8072''|The background color of the selected area of the slider.|


## Example

See [Example.js](examples/Example.js) file.

Follow those steps to run the example:

1. Clone the repo `git clone https://github.com/vamsiabishek/react-native-number-slider.git && cd react-native-number-slider/examples`
2. Install dependencies `npm install``
3. Follow [official instructions](https://facebook.github.io/react-native/docs/getting-started.html) to run the example project in a simulator or device.


```js
import React, {useState} from 'react'
import NumberSlider from 'react-native-number-slider'

export default () => {
  const [value, setValue] = useState(1)
  onValueChange = (value) => {
    setValue(value)
  }
  return (
    <NumberSlider 
      onValueChange={onValueChange} 
      value={value} 
      width={300}
      displayValues= {[1, 2, 3, 4, 5]}
      fontSize={15}
      containerBackground='#f1f2f6'
      selectedBackground='#FA8072'
    />
  )
}
```

## Licence
[MIT](http://opensource.org/licenses/mit-license.html)

---
_Source: https://npm.io/package/react-native-number-slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._