Installation & Usage

To install this module cd to your project directory and enter the following command:

yarn add @groww-tech/editable-number-slider

or

npm install @groww-tech/editable-number-slider --save

If using iOS please remember to install cocoapods by running: npx pod-install

The following code presents the basic usage scenario of this library:

import EditableNumberSlider from '@groww-tech/editable-number-slider';

<EditableNumberSlider
  minimumValue={0}
  maximumValue={100}
/>

You can pass several props to customize the component:

import EditableNumberSlider from '@groww-tech/editable-number-slider';

<EditableNumberSlider
  minimumValue={0}
  maximumValue={100}
  initialValue={40}
  sliderProps={
    disabled: false,
    thumbTintColor: 'red',
    minimumTrackTintColor: 'black',
    maximumTrackTintColor: 'gray',
  }
  prefix={'$ '}
  sliderStep={10}
  labelColor={'#ff00ff'}
  labelErrorColor={'#ff0000'}
  nativeRipple={false}
/>

Properties

| Property | Description | Type | Required | Platform | | -------- | ----------- | ---- | -------- | -------- | | maximumValue | Initial maximum value of the slider.Default value is 1. | number | Yes | | | minimumValue | Initial minimum value of the slider.Default value is 0. | number | Yes | | | sliderStep | Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 1 | number | No | | | onValueChange | Callback continuously called while the user is dragging the slider. | function | No | | | disabled| If true the user won't be able to move the slider.Default value is false. | bool | No | | | containerStyle | Custom style for container. | style | No | | | editable | boolean for making text input editable. Default: True | boolean | No | | | rightElement | Custom component for the edit/done button | component| No | | | onEditStart | Callback called when editing starts | Function | No | | | onEdit | Callback called when editing is done | Function | No | | | absoluteMinima | Needed to protect slider going to a number below minimum in case of a flick | number | No | | | formatValue | Show custom string instead of just numerical value of slider. Accepts value as parameter | Function | No | | | labelColor | Custom color for label | color(in hex) | No | | | lableErrorColor | Custom color for when label value is incorrect | color(in hex) | No | | | nativeRipple | Choose whether ripple for editable component should be nativeRipple. Default: true | boolean | No | | | sliderProps | Custom Slider Props customThumb?: string, minimumTrackTintColor?: string; maximumTrackTintColor?: string; thumbTintColor?: string; disabled?: boolean; onSlidingStart?: Function onSlidingComplete?: Function; | object | No | |

Made with ❤️ at Groww