feat: add slider upper and lower limits

README.md

@@ -101,6 +101,8 @@ AppRegistry.registerComponent('SliderExample', () => SliderExample);
 | minimumTrackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track left of the thumb |
 | maximumTrackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track right of the thumb |
 | value | number or Array | Yes | 0 | Initial value of the slider. The value should be a number or array of numbers between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0. _This is not a controlled component_, e.g. if you don't update the value, the component won't be reset to its inital value. |
+| lowerLimit | number | Yes | undefined | Slide lower limit. The user won't be able to slide below this limit. |
+| upperLimit | number | Yes | undefined | Slide upper limit. The user won't be able to slide above this limit. |
 
 ---
 

src/index.tsx

@@ -190,6 +190,8 @@ export class Slider extends PureComponent<SliderProps, SliderState> {
  value: 0,
  vertical: false,
  startFromZero: false,
+ lowerLimit: undefined,
+ upperLimit: undefined,
  };
 
  static getDerivedStateFromProps(props: SliderProps, state: SliderState) {
@@ -405,15 +407,15 @@ export class Slider extends PureComponent<SliderProps, SliderState> {
  };
  _getValue = (gestureState: {dx: number; dy: number}) => {
  const {containerSize, thumbSize, values} = this.state;
- const {maximumValue, minimumValue, step, vertical} = this.props;
+ const {lowerLimit, upperLimit, maximumValue, minimumValue, step, vertical} = this.props;
  const length = containerSize.width - thumbSize.width;
  const thumbLeft = vertical
  ? this._previousLeft + gestureState.dy * -1
  : this._previousLeft + gestureState.dx;
  const nonRtlRatio = thumbLeft / length;
  const ratio = I18nManager.isRTL ? 1 - nonRtlRatio : nonRtlRatio;
- let minValue = minimumValue;
- let maxValue = maximumValue;
+ let minValue = !!lowerLimit || lowerLimit === 0 ? lowerLimit : minimumValue;
+ let maxValue = !!upperLimit || upperLimit === 0 ? upperLimit : maximumValue;
 
  const rawValues = this._getRawValues(values);
 

src/types.ts

@@ -64,6 +64,8 @@ export type SliderProps = {
  */
  startFromZero?: boolean;
  vertical?: boolean;
+ lowerLimit?: number;
+ upperLimit?: number;
 };
 
 export type SliderState = {