# react-native-slider
**Repository Path**: harmonytsc_rn/react-native-slider
## Basic Information
- **Project Name**: react-native-slider
- **Description**: react-native-slider库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-11-12
- **Last Updated**: 2026-11-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
> 模板版本：v0.2.2
react-native-slider
## 安装与使用
请到三方库的 Releases 发布地址查看配套的版本信息：[@ohmi/react-native-slider Releases](https://e.gitee.com/kunyuan-hongke/repos/kunyuan-hongke/react-native-slider/releases) 。对于未发布到npm的旧版本，请参考[安装指南](https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/tgz-usage.md)安装tgz包。
进入到工程目录并输入以下命令：
#### **npm**
```bash
npm install @ohmi/react-native-slider
```
#### **yarn**
```bash
yarn add @ohmi/react-native-slider
```
下面的代码展示了这个库的基本使用场景：
> [!WARNING] 使用时 import 的库名不变。
```jsx
'use strict';
var React = require('react');
var Slider = require('react-native-slider');
var {
AppRegistry,
StyleSheet,
View,
Text,
} = require('react-native');
var SliderExample = React.createClass({
getInitialState() {
return {
value: 0.2,
};
},
render() {
return (
this.setState({value})} />
Value: {this.state.value}
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
marginLeft: 10,
marginRight: 10,
alignItems: 'stretch',
justifyContent: 'center',
},
});
AppRegistry.registerComponent('SliderExample', () => SliderExample);
```
> [!TIP] "Platform"列表示该属性在原三方库上支持的平台。
> [!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。
## Props
| Name | Description | Type | Required | Platform | HarmonyOS Support |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
| value | Initial value of the slider | number | no | ios/android | yes |
| disabled | If true the user won't be able to move the slider | bool | no | ios/android | yes |
| minimumValue | Initial minimum value of the slider | number | no | ios/android | yes |
| maximumValue | Initial maximum value of the slider | number | no | ios/android | yes |
| step | Step value of the slider. The value should be between 0 and maximumValue - minimumValue) | number | no | ios/android | yes |
| minimumTrackTintColor | The color used for the track to the left of the button | string | no | ios/android | yes |
| maximumTrackTintColor | The color used for the track to the right of the button | string | no | ios/android | yes |
| thumbTintColor | The color used for the thumb | string | no | ios/android | yes |
| thumbTouchSize | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily. | object | no | ios/android | yes |
| onValueChange | Callback continuously called while the user is dragging the slider | function | no | ios/android | yes |
| onSlidingStart | Callback called when the user starts changing the value (e.g. when the slider is pressed) | function | no | ios/android | yes |
| onSlidingComplete | Callback called when the user finishes changing the value (e.g. when the slider is released) | function | no | ios/android | yes |
| style | The style applied to the slider container | [style] | no | ios/android | yes |
| trackStyle | The style applied to the track | [style] | no | ios/android | yes |
| thumbStyle | The style applied to the thumb | [style] | no | ios/android | yes |
| thumbImage | Sets an image for the thumb. | [source] | no | ios/android | yes |
| debugTouchArea | Set this to true to visually see the thumb touch rect in green. | bool | no | ios/android | yes |
| animateTransitions | Set to true if you want to use the default 'spring' animation | bool | no | ios/android | yes |
| animationType | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html). | string | no | ios/android | yes |
| animationConfig | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). | object | no | ios/android | yes |
---
## 遗留问题
## 开源协议
本项目基于 [MIT License (MIT)](https://github.com/react-native-maps/react-native-maps/blob/master/LICENSE) ，请自由地享受和参与开源。