react-native-double-slider

A simple and customisable double slider component for react native.

Installation

npm install react-native-double-slider

or

yarn add react-native-double-slider

Usage

import React from 'react';
import { DoubleSlider, Trigger } from 'react-native-double-slider';

export const App = () => {
  const triggers: Trigger[] = [
    { predicate: (x) => x > 0.5, action: () => console.log('right action') },
    { predicate: (x) => x < -0.5, action: () => console.log('left action') },
  ];

  return <DoubleSlider triggers={triggers} />;
};

Props

Prop	Type	Description
triggers	{ predicate: (x: number) => boolean, action: () => void }[]	A list of Trigger objects. x is a number between -1 and 1 corresponding to the left and right ends of the bar, respectively. The action is executed when the predicate evaluates to true. If more than one predicate evaluates to true during one gesture event, only the first executes.
barStyle	ViewStyle	Style for the bar.
handleStyle	ViewStyle	Style for the handle.
textStyle	TextStyle	Style for all the text.
arrowStyle	TextStyle	Style for the chevrons.
customHandle	React.ReactNode	A optional custom handle that will be used instead of the default.
left	{ idleText?: string, transitioningText?: string, position: number | string }	Text displayed on the left side. idleText is shown before interaction and transitioningText is shown whilst the user is moving the handle. position is the absolute position of the text from the end.
right	{ idleText?: string, transitioningText?: string, postion: number | string }	Text displayed on the right side. idleText is shown before interaction and transitioningText is shown whilst the user is moving the handle. position is the absolute position of the text from the end.
target	{ component: React.ReactNode, position: number }	A optional component that is shown on both sides to inform the user where to release the handle to trigger the action. position is the absolute position of the target component from either end.

Default styles

barStyle

{
    width: '95%',
    backgroundColor: 'white',
    height: 40,
    borderWidth: 2,
    borderColor: 'black',
    borderRadius: 20,
}

handleStyle

{
    height: 60,
    width: 60,
    backgroundColor: 'lightgrey',
    borderRadius: 100,
    borderWidth: 2,
    borderColor: 'black',
}

textStyle

{
    color: '#000000',
}

License

MIT