npm install @react-native-community/slider
# 或
yarn add @react-native-community/slider

import Slider from '@react-native-community/slider';

<Slider
  style={{width: '100%', height: 40}}  // 调整高度可以改变滑块大小
  minimumValue={0}
  maximumValue={100}
  minimumTrackTintColor="#0000FF"
  maximumTrackTintColor="#000000"
  thumbTintColor="#0000FF"
/>

import Slider from '@react-native-community/slider';

<Slider
  style={{width: '100%', height: 50}}
  minimumValue={0}
  maximumValue={100}
  thumbTintColor="blue"
  thumbSize={30}  // 直接设置滑块大小
  trackHeight={10}  // 设置轨道高度
/>

<Slider
  style={{
    width: '100%',
    height: 40,
    transform: [{scaleX: 1.5}, {scaleY: 1.5}]  // 水平和垂直缩放
  }}
  // 其他属性...
/>

import {View, PanResponder, Animated} from 'react-native';

class CustomSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pan: new Animated.Value(0),
    };
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {dx: this.state.pan}]),
    });
  }

  render() {
    return (
      <View style={{height: 50, justifyContent: 'center'}}>
        <View style={{height: 10, backgroundColor: '#ddd', borderRadius: 5}}>
          <Animated.View
            style={{
              height: 30,
              width: 30,
              borderRadius: 15,
              backgroundColor: 'blue',
              position: 'absolute',
              left: this.state.pan.interpolate({
                inputRange: [0, 300],
                outputRange: [0, 270],
              }),
              bottom: -10,
            }}
            {...this.panResponder.panHandlers}
          />
        </View>
      </View>
    );
  }
}