rnr-slider

React Native component powered with Reanimated2 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.

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.Default value is 0. | number | No | | max | Maximum of values range.Default is 100. | number | No | | defaultPercent | Default percent of where knob will initially render.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.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.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.Works with withAnimatedProgressBar only!| React.ReactElement | No | | progressBarFillStyles | Style for custom progress bar fill. | ViewStyle | No |