React-native-double-slider NPM

react-native-double-slider

A simple and customisable double slider component for react native. double-slider

Installation

npm install react-native-double-slider

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

default-double-slider

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

react native ios android ui component double slider slider

@everything-registry/sub-chunk-2576 @infinitebrahmanuniverse/nolb-react-native-d

0.1.1

4 years ago