@3beeepb/react-native-range-slider NPM

react-native-range-slider

A cross-platform (iOS / Android) implementation of Range Slider for React Native.

Installation

npm: npm install --save @3beeepb/react-native-range-slider --save

Usage

RangeSlider uses react hooks, so this component doesn't work with React Native versions below 0.59.0

Import the library

import RangeSlider from '@3beeepb/react-native-range-slider';

Just use it like this:

Handler callback

const handleValueChange = useCallback((low, high, isUpdate) => {
  if (isUpdate) {
    setLow(low);
    setHigh(high);
  }
}, []);
const handleChange = useCallback(() => {
  // release thumb
}, []);

JSX

<Slider
  style={styles.slider}
  min={0}
  max={100}
  onChange={handleChange}
  onValueChanged={handleValueChange}
/>

Properties

Name	Description	Type	Default Value
`min`	Minimum value of slider	number	required
`max`	Maximum value of slider	number	required
`step`	Step of slider	number	`1`
`low`	Low value of slider	number	Initially `min` value will be set if not provided
`high`	High value of slider	number	Initially `max` value will be set if not provided
`floatingLabel`	If set to `true`, labels will not take space in component tree. Instead they will be rendered over the content above the slider (like a small popup).	boolean	`false`
`disableRange`	Slider works as an ordinary slider with only one control if `true`	boolean	`false`
`disabled`	Any user interactions will be ignored if `true`	boolean	`false`
`allowLabelOverflow`	If set to `true`, labels are allowed to be drawn outside of slider component's bounds.Otherwise label's edges will never get out of component's edges.	boolean	`false`
`renderThumb`	Should render the thumb.	`() => Node`	`undefined`
`renderRail`	Should render the "rail" for thumbs.Rendered component should have `flex: 1` style so it won't fill up the whole space.	`() => Node`	`undefined`
`renderRailSelected`	Should render the selected part of "rail" for thumbs.Rendered component should not have `flex: 1` style so it fills up the whole space.	`() => Node`	`undefined`
`renderLabel`	Should render label above thumbs.If no function is passed, no label will be drawn.	`(value: number) => Node`	`undefined`
`renderNotch`	Should render the notch below the label (above the thumbs).Classic notch is a small triangle below the label.If `allowLabelOverflow` is not set to true, the notch will continue moving with thumb even if the label has already reached the edge of the component and can't move further.	`() => Node`	`undefined`
`onValueChanged`	Will be called when a value was changed.If `disableRange` is set to true, the second argument should be ignored.`isUpdate` will be true if the value was changed by user's interaction.	`(low: number, high: number, isUpdate: boolean) => void`	`undefined`
`onChanged`	Will be called when a user release thumb.	`() => void`	`undefined`