0
# React Native Community Slider
1
2
React Native Community Slider is a cross-platform slider component that enables users to select a single value from a range of values. It provides extensive customization options including track colors, thumb styling, step values, visual markers, and supports both horizontal and vertical orientations across iOS, Android, Windows, and Web platforms.
3
4
## Package Information
5
6
- **Package Name**: @react-native-community/slider
7
- **Package Type**: npm
8
- **Language**: TypeScript (React Native)
9
- **Installation**: `npm install @react-native-community/slider` or `yarn add @react-native-community/slider`
10
- **Platforms**: iOS, Android, Windows, Web
11
12
## Core Imports
13
14
```typescript
15
import Slider from '@react-native-community/slider';
16
```
17
18
For importing types:
19
20
```typescript
21
import Slider, {
22
SliderProps,
23
SliderRef,
24
MarkerProps,
25
TrackMarksProps,
26
SliderIOS
27
} from '@react-native-community/slider';
28
```
29
30
For CommonJS:
31
32
```javascript
33
const Slider = require('@react-native-community/slider').default;
34
```
35
36
## Basic Usage
37
38
```typescript
39
import React, { useState } from 'react';
40
import { View } from 'react-native';
41
import Slider from '@react-native-community/slider';
42
43
function MySlider() {
44
const [value, setValue] = useState(0.5);
45
46
return (
47
<View>
48
<Slider
49
style={{width: 200, height: 40}}
50
minimumValue={0}
51
maximumValue={1}
52
value={value}
53
onValueChange={setValue}
54
minimumTrackTintColor="#FFFFFF"
55
maximumTrackTintColor="#000000"
56
/>
57
</View>
58
);
59
}
60
```
61
62
## Architecture
63
64
The React Native Community Slider is built around several key components:
65
66
- **Main Slider Component**: The primary interface that handles props, state management, and rendering
67
- **Native Component Layer**: Platform-specific native implementations using React Native Codegen
68
- **Step Indicators System**: Optional visual markers and numbers for discrete value selection
69
- **Cross-Platform Support**: Consistent API with platform-specific optimizations and features
70
71
## Capabilities
72
73
### Core Slider Component
74
75
The main Slider component providing value selection from a customizable range with extensive styling and behavior options.
76
77
```typescript { .api }
78
interface SliderProps extends ViewProps {
79
// Core value props
80
value?: number;
81
minimumValue?: number;
82
maximumValue?: number;
83
step?: number;
84
disabled?: boolean;
85
86
// Event handlers
87
onValueChange?: (value: number) => void;
88
onSlidingStart?: (value: number) => void;
89
onSlidingComplete?: (value: number) => void;
90
91
// Visual styling
92
minimumTrackTintColor?: ColorValue;
93
maximumTrackTintColor?: ColorValue;
94
thumbTintColor?: ColorValue;
95
style?: StyleProp<ViewStyle>;
96
testID?: string;
97
inverted?: boolean;
98
99
// iOS-specific props
100
maximumTrackImage?: ImageURISource;
101
minimumTrackImage?: ImageURISource;
102
thumbImage?: ImageURISource;
103
trackImage?: ImageURISource;
104
tapToSeek?: boolean;
105
106
// Windows-specific props
107
vertical?: boolean;
108
109
// Step indicators
110
StepMarker?: FC<MarkerProps>;
111
renderStepNumber?: boolean;
112
113
// Accessibility
114
accessibilityUnits?: string;
115
accessibilityIncrements?: Array<string>;
116
117
// Value limits
118
lowerLimit?: number;
119
upperLimit?: number;
120
}
121
122
default export class Slider extends React.Component<SliderProps> {}
123
```
124
125
[Core Component](./core-component.md)
126
127
### Platform-Specific Features
128
129
Platform-specific props and behaviors for iOS images, Windows vertical orientation, and Android styling.
130
131
```typescript { .api }
132
interface SliderPropsIOS extends ViewProps {
133
maximumTrackImage?: ImageURISource;
134
minimumTrackImage?: ImageURISource;
135
tapToSeek?: boolean;
136
thumbImage?: ImageURISource;
137
trackImage?: ImageURISource;
138
}
139
140
interface SliderPropsWindows extends ViewProps {
141
vertical?: boolean;
142
}
143
144
interface SliderPropsAndroid extends ViewProps {
145
thumbTintColor?: string;
146
}
147
```
148
149
[Platform Features](./platform-features.md)
150
151
### Step Indicators & Visual Markers
152
153
Advanced features for creating step-based sliders with custom markers and visual indicators.
154
155
```typescript { .api }
156
interface MarkerProps {
157
stepMarked: boolean;
158
currentValue: number;
159
index: number;
160
min: number;
161
max: number;
162
}
163
164
interface SliderStepProps {
165
StepMarker?: FC<MarkerProps>;
166
renderStepNumber?: boolean;
167
}
168
```
169
170
[Step Indicators](./step-indicators.md)
171
172
### Accessibility & Limits
173
174
Accessibility features and value limits for enhanced user experience and control.
175
176
```typescript { .api }
177
interface SliderAccessibilityProps {
178
accessibilityUnits?: string;
179
accessibilityIncrements?: Array<string>;
180
lowerLimit?: number;
181
upperLimit?: number;
182
}
183
```
184
185
[Accessibility & Limits](./accessibility-limits.md)
186
187
### Programmatic Control
188
189
Reference-based methods for programmatic value updates and control.
190
191
```typescript { .api }
192
interface SliderRef {
193
updateValue(value: number): void;
194
}
195
196
type SliderReferenceType =
197
| (React.MutableRefObject<SliderRef> & React.LegacyRef<Slider>)
198
| undefined;
199
```
200
201
[Programmatic Control](./programmatic-control.md)
202
203
## Types
204
205
### React Native Types
206
207
```typescript { .api }
208
// From React Native core
209
import type {
210
ViewProps,
211
StyleProp,
212
ViewStyle,
213
ColorValue,
214
ImageURISource
215
} from 'react-native';
216
217
// From React
218
import type { FC } from 'react';
219
```
220
221
### Core Types
222
223
```typescript { .api }
224
type Constructor<T> = new (...args: any[]) => T;
225
226
type SliderReferenceType =
227
| (React.MutableRefObject<SliderRef> & React.LegacyRef<Slider>)
228
| undefined;
229
230
interface SliderRef {
231
updateValue(value: number): void;
232
}
233
234
interface MarkerProps {
235
stepMarked: boolean;
236
currentValue: number;
237
index: number;
238
min: number;
239
max: number;
240
}
241
242
interface TrackMarksProps {
243
isTrue: boolean;
244
index: number;
245
thumbImage?: ImageURISource;
246
StepMarker?: FC<MarkerProps>;
247
currentValue: number;
248
min: number;
249
max: number;
250
}
251
252
export type SliderIOS = Slider;
253
```
254
255
### Platform Integration Types
256
257
```typescript { .api }
258
interface SliderProps
259
extends SliderPropsIOS,
260
SliderPropsAndroid,
261
SliderPropsWindows {
262
// All platform-specific props are merged into SliderProps
263
}
264
```