OK，我们先看下效果图

注意使用到了两个库

1.react-native-linear-gradient

2.react-native-gesture-handler

ok，我们看下面的代码

import {Image, TouchableWithoutFeedback, StyleSheet, View} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import React from 'react';
import {
  Gesture,
  GestureDetector,
  GestureHandlerRootView,
} from 'react-native-gesture-handler';
export class HorizntalSlider extends React.Component {
  shouldComponentUpdate(
    nextProps: Readonly<P>,
    nextState: Readonly<S>,
    nextContext: any,
  ): boolean {
    return false;
  }
  constructor(props) {
    super(props);
    this.progress = props.initValue;
    this.step = props.step;
    this.range = props.max - props.min;
    this.currentX = 0;
    this.enable = true;
  }
  _setValueChange(value) {
    this.currentX = value;
    this.selectedTrack.setNativeProps({
      style: {width: value},
    });
    let indicatorValue = value - 5 > 0 ? value - 5 : 0;
    this.indicator.setNativeProps({
      style: {left: indicatorValue - 1},
    });
  }

  componentDidMount(): void {
    if (this.props) {
      this.setPowerState(this.props.openState);
    }
  }

  _add() {
    if (!this.enable) {