# rnr-slider

> React Native Reanimated2 slider component

Latest version **1.0.14** (published 2022-11-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install rnr-slider
pnpm add rnr-slider
yarn add rnr-slider
bun add rnr-slider
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.14 |
| Published | 2022-11-15 |
| First published | 2022-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 32 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Sergey Zakharov |
| Maintainers | monkeealert |

## Links

- npm: https://www.npmjs.com/package/rnr-slider
- Repository: https://github.com/MonkeeAlert/rnr-slider
- Homepage: https://github.com/MonkeeAlert/rnr-slider#readme
- Issues: https://github.com/MonkeeAlert/rnr-slider/issues
- npm.io page: https://npm.io/package/rnr-slider

## Dependencies (4)

- [react](https://npm.io/package/react.md) 18.0.0
- [react-native](https://npm.io/package/react-native.md) 0.69.3
- [react-native-reanimated](https://npm.io/package/react-native-reanimated.md) ^2.9.1
- [react-native-gesture-handler](https://npm.io/package/react-native-gesture-handler.md) ^2.5.0

## Recent versions

- 1.0.14 (latest) — 2022-11-15
- 1.0.13 — 2022-11-11
- 1.0.12 — 2022-11-09
- 1.0.11 — 2022-11-08
- 1.0.10 — 2022-11-04
- 1.0.9 — 2022-10-31
- 1.0.8 — 2022-09-19
- 1.0.7 — 2022-09-18
- 1.0.6 — 2022-09-18
- 1.0.5 — 2022-09-16
- 1.0.4 — 2022-09-16
- 0.0.1 — 2022-08-05

## README

# rnr-slider
React Native component powered with [Reanimated2](https://docs.swmansion.com/react-native-reanimated/) used to select a single value from a range of values

## Installation and usage
To install this module do these terminal commands inside your project folder

Using Yarn:
```
yarn add rnr-slider
```

Using NPM:
```
npm install rnr-slider --save
```

## Basic usage
As this component uses Reanimated2 library inside, it is important to use Reanimated2-hooks (e.g. `useWorkletCallback`) for the slider callbacks. Creates horizontal and vertical sliders.  

```js
import {Slider} from 'rnr-slider';

const Example = () => {
  const _onSlideStart = useWorkletCallback(e => {
    console.log('@start:', e);
  }, []);
  
  const _onSlideChange = useWorkletCallback(({value}) => {
    console.log('@change:', value);
  }, []);

  const _onSlideEnd = useWorkletCallback(e => {
    console.log('@end':, e);
  }, []);

  return (
    <Slider
      onSlideChange={_onSlideChange}
      onSlideStart={_onSlideStart}
      onSlideEnd={_onSlideEnd}
    />
  ) 
}
```
## Main props
| Property | Description | Type | Required |
| ------------- | ------------- | ------------- | ------------- |
| `onSlideChange` | Main handler for slider value change. | function | Yes |
| `min` | Minimum of values range.<br/>Default value is 0. | number | No |
| `max` | Maximum of values range.<br/>Default is 100. | number | No |
| `defaultPercent` | Default percent of where knob will initially render.<br/>Default is 0. | number | No |
| `onSlideStart` | Additional handler which calls on slide start. | function | No |
| `onSlideEnd` | Additional handler which calls on slide end. | function | No |
| `onDoubleTap` | Additional handler which calls on knob double tap.<br/>Useful when we want to reset slider to its initial value. | function | No |
| `forwardedRef` | Reference object. | React.RefObject | No |
| `withDecimals` | Value in hint will be represented with floating point. | boolean | No |
| `isVertical` | Make vertical slider. | boolean | No |
| `containerStyle` | Slider container style. | ViewStyle | No |

## Hint props
| Property | Description | Type | Required |
| ------------- | ------------- | ------------- | ------------- |
| `withHint` | Shows balloon with current slider value near knob. | boolean | No |
| `HintComponent` | Custom hint component. | React.ReactElement | No |

## Knob props
| Property | Description | Type | Required |
| ------------- | ------------- | ------------- | ------------- |
| `knobSize` | Size of native knob. | number | No |
| `knobStyle` | Style of native knob. | ViewStyle | No |
| `knobVelocityLimitation` | Velocity limitation of knob.<br/>Useful when we need to check specific slider value (e.g. for haptics). | number | No |
| `KnobComponent` | Custom knob component. | React.ReactElement | No |

## Progress bar props
| Property | Description | Type | Required |
| ------------- | ------------- | ------------- | ------------- |
| `ProgressBarComponent` | Custom progress bar container component. | React.ReactElement | No |
| `withAnimatedProgressBar` | Shows `ProgressBarFillComponent`. | boolean | No |
| `ProgressBarFillComponent` | Custom progress bar fill component.<br/>Works with `withAnimatedProgressBar` only!| React.ReactElement | No |
| `progressBarFillStyles` | Style for custom progress bar fill. | ViewStyle | No |

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