1.0.2 • Published 2 years ago
sliding-and-editing v1.0.2
Installation & Usage
To install this module cd to your project directory and enter the following command:
yarn add @groww-tech/editable-number-slideror
npm install @groww-tech/editable-number-slider --saveIf 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 |