Rnr-slider NPM

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