# react-native-range-slider

> The native slider for react native with multiple markers

Latest version **0.1.2** (published 2019-03-05) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2019-03-05 |
| First published | 2018-05-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 64 |
| Author | ismnoiet |
| Maintainers | ismnoiet |
| Keywords | slider, range, ios, range-slider, react-component, react-native-component, react-native |

## Links

- npm: https://www.npmjs.com/package/react-native-range-slider
- Repository: https://github.com/ismnoiet/react-native-range-slider
- Issues: https://github.com/ismnoiet/react-native-range-slider.git
- npm.io page: https://npm.io/package/react-native-range-slider

## Dependencies (1)

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

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.1.2 (latest) — 2019-03-05
- 0.1.1 — 2018-11-02
- 0.1.0 — 2018-08-01
- 0.0.7 — 2018-06-20
- 0.0.6 — 2018-06-18
- 0.0.5 — 2018-06-12
- 0.0.4 — 2018-06-07
- 0.0.3 — 2018-05-30
- 0.0.2 — 2018-05-29
- 0.0.1 — 2018-05-29

## README

<h2 align="center">React Native Range Slider</h2>
<p align="center">The high-quality native iOS range slider</a> for <a href="https://facebook.github.io/react-native/">react native.</a> A slider, similar in style to UISlider, but which allows you to pick a minimum and maximum range.

<b>Note: This slider can also be used as a normal slider with only one handle.<br><br><br></b>
<p align="center">
  <a href="https://github.com/ismnoiet/example_RN_range_slider">Demo</a>
</p>

<p align="center">
  <img src="./demo.gif" width="300" border="1px" style="margin-top: 50px"/>
</p>

<p align="center">
  <img src="./illustration.png"/>
</p>



## Getting Started

1. Installation

   * Using npm: `npm install --save react-native-range-slider`
   * Using yarn: `yarn add react-native-range-slider`

2. Link
   * Run `react-native link react-native-range-slider`
   * If linking fails, follow the
     [manual linking steps](https://facebook.github.io/react-native/docs/linking-libraries-ios.html#manual-linking)

## Usage

If you want a working example you can check [this example](https://github.com/ismnoiet/example_RN_range_slider), otherwise you can use the following example as a starting point.

```javascript
import RangeSlider from 'react-native-range-slider'
```

```JSX
<View style={{flex: 1, flexDirection: 'row'}}>
  <RangeSlider
    minValue={0}
    maxValue={100}
    tintColor={'#da0f22'}
    handleBorderWidth={1}
    handleBorderColor="#454d55"
    selectedMinimum={20}
    selectedMaximum={40}
    style={{ flex: 1, height: 70, padding: 10, backgroundColor: '#ddd' }}
    onChange={ (data)=>{ console.log(data);} }
  />
</View>
```
## API

| Property |      Description      |  Type  |
|----------|:-------------:|----------|
| disableRange |  when set to true, the slider will mimic a normal slider with only one handle and the slider value will be stored in selectedMaximum | Boolean, false by default |
| minValue |  the minimum value for the slider | Number(float) |
| maxValue |  the maximum value for the slider   |   Number(float) |
| selectedMinimum | the selected minimum value, it shouldn't be less than `minValue`  |    Number(float) |
| selectedMaximum | the selected maximum value, it shouldn't be bigger than `maxValue`  |    Number(float) |
| onChange | a callback that will be called with slider data once the values change   |    Callback |
| tintColor | the color for the slider bar and the two handlers   |    String(**MUST BE A HEX VALUE**) |
| handleColor | the color for both `selectedMinimum` and `selectedMaximum`  handlers |    String(**MUST BE A HEX VALUE**) |
| handleBorderColor | the color for the slider handle border   |    String(**MUST BE A HEX VALUE**) |
| handleBorderWidth | the width for the slider handle border   |    Number(float) |
| handleDiameter | the diameter for the slider handle   |    Number(float) default 16.0 |
| tintColorBetweenHandles | the color of the slider bar between the `selectedMinimum` and `selectedMaximum` handlers   |    String(**MUST BE A HEX VALUE**) |
| minLabelColour | the color of the min label on top of `selectedMinimum` handler |    String(**MUST BE A HEX VALUE**) |
| maxLabelColour | the color of the max label on top of `selectedMaximum` handler |    String(**MUST BE A HEX VALUE**) |
| lineHeight | the height for slider bar | Number(float) default 1.0) |
| preffix | the string to be prepended to min and max labels values  |    String |
| suffix | the string to be appended to min and max labels values  |    String |
| hideLabels | a boolean to determine handle labels visibility, if set to true range labels will be hidden  |    Boolean |


## Todo

   - [x] Add possibility to update handlers related properties.
   - [x] Impliment other necessary methods.
   - [x] Improve the documentation.
   - [x] Make the module cooler.
   - [ ] Add android support.


## Acknowledgement

   * <a href="https://github.com/TomThorpe/TTRangeSlider">TTRangeSlider</a>, which this module is based on.

## How to contribute ?
You are interested and want to contribute? Awesome, just consider the following steps:

1. Fork this repository.
2. Add and test the fixes/improvements you worked on to a seperate branch.
3. Submit your pull request(PR).

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