0
# Core Slider Component
1

2
The main Slider component providing value selection from a customizable range with extensive styling and behavior options.
3

4
## Capabilities
5

6
### Slider Component
7

8
The primary slider component that handles value selection, event callbacks, and basic styling.
9

10
```typescript { .api }
11
/**
12
 * A component used to select a single value from a range of values.
13
 * This is not a controlled component - you don't need to update the value during dragging.
14
 */
15
default export class Slider extends React.Component<SliderProps> {}
16

17
interface SliderProps extends ViewProps {
18
  /**
19
   * Write-only property representing the value of the slider.
20
   * Can be used to programmatically control the position of the thumb.
21
   * Entered once at the beginning still acts as an initial value.
22
   * The value should be between minimumValue and maximumValue,
23
   * which default to 0 and 1 respectively.
24
   * Default value is 0.
25
   *
26
   * This is not a controlled component, you don't need to update the
27
   * value during dragging.
28
   */
29
  value?: number;
30

31
  /**
32
   * Initial minimum value of the slider. Default value is 0.
33
   */
34
  minimumValue?: number;
35

36
  /**
37
   * Initial maximum value of the slider. Default value is 1.
38
   */
39
  maximumValue?: number;
40

41
  /**
42
   * Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). 
43
   * Default value is 0.
44
   */
45
  step?: number;
46

47
  /**
48
   * If true the user won't be able to move the slider.
49
   * Default value is false.
50
   */
51
  disabled?: boolean;
52

53
  /**
54
   * Reverses the direction of the slider.
55
   */
56
  inverted?: boolean;
57

58
  /**
59
   * Used to style and layout the Slider. See StyleSheet.js and ViewStylePropTypes.js for more info.
60
   */
61
  style?: StyleProp<ViewStyle>;
62

63
  /**
64
   * Used to locate this view in UI automation tests.
65
   */
66
  testID?: string;
67
}
68
```
69

70
**Usage Examples:**
71

72
```typescript
73
import React, { useState } from 'react';
74
import Slider from '@react-native-community/slider';
75

76
// Basic slider
77
function BasicSlider() {
78
  return (
79
    <Slider
80
      style={{width: 200, height: 40}}
81
      minimumValue={0}
82
      maximumValue={100}
83
      value={50}
84
    />
85
  );
86
}
87

88
// Stepped slider
89
function SteppedSlider() {
90
  const [value, setValue] = useState(0);
91
  
92
  return (
93
    <Slider
94
      style={{width: 200, height: 40}}
95
      minimumValue={0}
96
      maximumValue={10}
97
      step={1}
98
      value={value}
99
      onValueChange={setValue}
100
    />
101
  );
102
}
103

104
// Disabled slider
105
function DisabledSlider() {
106
  return (
107
    <Slider
108
      style={{width: 200, height: 40}}
109
      minimumValue={0}
110
      maximumValue={1}
111
      value={0.5}
112
      disabled={true}
113
    />
114
  );
115
}
116

117
// Inverted slider
118
function InvertedSlider() {
119
  return (
120
    <Slider
121
      style={{width: 200, height: 40}}
122
      minimumValue={0}
123
      maximumValue={1}
124
      value={0.3}
125
      inverted={true}
126
    />
127
  );
128
}
129
```
130

131
### Event Handling
132

133
Event callbacks for tracking slider interactions and value changes.
134

135
```typescript { .api }
136
interface SliderEventProps {
137
  /**
138
   * Callback continuously called while the user is dragging the slider.
139
   */
140
  onValueChange?: (value: number) => void;
141

142
  /**
143
   * Callback that is called when the user picks up the slider.
144
   * The initial value is passed as an argument to the callback handler.
145
   */
146
  onSlidingStart?: (value: number) => void;
147

148
  /**
149
   * Callback called when the user finishes changing the value (e.g. when the slider is released).
150
   */
151
  onSlidingComplete?: (value: number) => void;
152
}
153
```
154

155
**Usage Examples:**
156

157
```typescript
158
import React, { useState } from 'react';
159
import { Alert } from 'react-native';
160
import Slider from '@react-native-community/slider';
161

162
function EventHandlingSlider() {
163
  const [value, setValue] = useState(0.5);
164
  const [isSliding, setIsSliding] = useState(false);
165

166
  return (
167
    <Slider
168
      style={{width: 200, height: 40}}
169
      minimumValue={0}
170
      maximumValue={1}
171
      value={value}
172
      onValueChange={(newValue) => {
173
        setValue(newValue);
174
        console.log('Value changing:', newValue);
175
      }}
176
      onSlidingStart={(startValue) => {
177
        setIsSliding(true);
178
        console.log('Started sliding at:', startValue);
179
      }}
180
      onSlidingComplete={(finalValue) => {
181
        setIsSliding(false);
182
        console.log('Finished sliding at:', finalValue);
183
        Alert.alert('Slider Complete', `Final value: ${finalValue.toFixed(2)}`);
184
      }}
185
    />
186
  );
187
}
188
```
189

190
### Visual Styling
191

192
Color and appearance customization for the slider tracks and thumb.
193

194
```typescript { .api }
195
interface SliderStyleProps {
196
  /**
197
   * The color used for the track to the left of the button.
198
   * Overrides the default blue gradient image on iOS.
199
   */
200
  minimumTrackTintColor?: string | ColorValue;
201

202
  /**
203
   * The color used for the track to the right of the button.
204
   * Overrides the default blue gradient image on iOS.
205
   */
206
  maximumTrackTintColor?: string | ColorValue;
207

208
  /**
209
   * The color used to tint the default thumb images on iOS, or the
210
   * color of the foreground switch grip on Android.
211
   */
212
  thumbTintColor?: string | ColorValue;
213
}
214
```
215

216
**Usage Examples:**
217

218
```typescript
219
import React from 'react';
220
import Slider from '@react-native-community/slider';
221

222
// Custom colored slider
223
function ColoredSlider() {
224
  return (
225
    <Slider
226
      style={{width: 200, height: 40}}
227
      minimumValue={0}
228
      maximumValue={1}
229
      value={0.7}
230
      minimumTrackTintColor="#1fb28a"
231
      maximumTrackTintColor="#d3d3d3"
232
      thumbTintColor="#b9e4c7"
233
    />
234
  );
235
}
236

237
// Theme-based slider
238
function ThemedSlider({ isDark }: { isDark: boolean }) {
239
  return (
240
    <Slider
241
      style={{width: 200, height: 40}}
242
      minimumValue={0}
243
      maximumValue={1}
244
      value={0.4}
245
      minimumTrackTintColor={isDark ? "#ffffff" : "#000000"}
246
      maximumTrackTintColor={isDark ? "#666666" : "#cccccc"}
247
      thumbTintColor={isDark ? "#ffffff" : "#333333"}
248
    />
249
  );
250
}
251
```
252

253
## Types
254

255
### Complete Props Interface
256

257
```typescript { .api }
258
interface SliderProps extends ViewProps, SliderEventProps, SliderStyleProps {
259
  value?: number;
260
  minimumValue?: number;
261
  maximumValue?: number;
262
  step?: number;
263
  disabled?: boolean;
264
  inverted?: boolean;
265
  style?: StyleProp<ViewStyle>;
266
  testID?: string;
267
}
268
```