0
# Step Indicators & Visual Markers
1

2
Advanced features for creating step-based sliders with custom markers, visual indicators, and step numbers for discrete value selection.
3

4
## Capabilities
5

6
### Step Marker Component
7

8
Custom component interface for rendering step indicators at specific slider positions.
9

10
```typescript { .api }
11
interface MarkerProps {
12
  /**
13
   * Whether this step is currently selected/marked
14
   */
15
  stepMarked: boolean;
16
  
17
  /**
18
   * Current value of the slider
19
   */
20
  currentValue: number;
21
  
22
  /**
23
   * Index of this step marker
24
   */
25
  index: number;
26
  
27
  /**
28
   * Minimum value of the slider
29
   */
30
  min: number;
31
  
32
  /**
33
   * Maximum value of the slider
34
   */
35
  max: number;
36
}
37

38
interface SliderStepProps {
39
  /**
40
   * Component to be rendered for each step indicator.
41
   */
42
  StepMarker?: FC<MarkerProps>;
43
  
44
  /**
45
   * Whether to render step numbers.
46
   */
47
  renderStepNumber?: boolean;
48
}
49
```
50

51
**Usage Examples:**
52

53
```typescript
54
import React from 'react';
55
import { View, Text } from 'react-native';
56
import Slider from '@react-native-community/slider';
57
import type { MarkerProps } from '@react-native-community/slider';
58

59
// Custom step marker component
60
const CustomStepMarker: React.FC<MarkerProps> = ({ 
61
  stepMarked, 
62
  currentValue, 
63
  index, 
64
  min, 
65
  max 
66
}) => {
67
  return (
68
    <View style={{
69
      width: 12,
70
      height: 12,
71
      borderRadius: 6,
72
      backgroundColor: stepMarked ? '#1fb28a' : '#d3d3d3',
73
      borderWidth: 2,
74
      borderColor: stepMarked ? '#ffffff' : '#999999',
75
    }} />
76
  );
77
};
78

79
// Slider with custom step markers
80
function StepMarkerSlider() {
81
  return (
82
    <Slider
83
      style={{width: 300, height: 40}}
84
      minimumValue={0}
85
      maximumValue={10}
86
      step={1}
87
      value={5}
88
      StepMarker={CustomStepMarker}
89
    />
90
  );
91
}
92

93
// Advanced step marker with labels
94
const LabeledStepMarker: React.FC<MarkerProps> = ({ 
95
  stepMarked, 
96
  currentValue, 
97
  index 
98
}) => {
99
  const labels = ['Min', 'Low', 'Med', 'High', 'Max'];
100
  const label = labels[Math.floor(index / 2.5)] || index.toString();
101
  
102
  return (
103
    <View style={{ alignItems: 'center' }}>
104
      <View style={{
105
        width: 10,
106
        height: 10,
107
        borderRadius: 5,
108
        backgroundColor: stepMarked ? '#FF6B6B' : '#CCCCCC',
109
      }} />
110
      <Text style={{
111
        fontSize: 10,
112
        marginTop: 4,
113
        color: stepMarked ? '#FF6B6B' : '#666666',
114
      }}>
115
        {label}
116
      </Text>
117
    </View>
118
  );
119
};
120

121
function LabeledStepSlider() {
122
  return (
123
    <Slider
124
      style={{width: 280, height: 60}}
125
      minimumValue={0}
126
      maximumValue={10}
127
      step={2.5}
128
      value={5}
129
      StepMarker={LabeledStepMarker}
130
    />
131
  );
132
}
133
```
134

135
### Step Numbers
136

137
Built-in step number rendering for displaying numeric values at step positions.
138

139
```typescript { .api }
140
interface SliderStepNumberProps {
141
  /**
142
   * Whether to render step numbers.
143
   */
144
  renderStepNumber?: boolean;
145
}
146
```
147

148
**Usage Examples:**
149

150
```typescript
151
import React, { useState } from 'react';
152
import Slider from '@react-native-community/slider';
153

154
// Slider with step numbers
155
function StepNumberSlider() {
156
  const [value, setValue] = useState(5);
157
  
158
  return (
159
    <Slider
160
      style={{width: 300, height: 50}}
161
      minimumValue={0}
162
      maximumValue={10}
163
      step={1}
164
      value={value}
165
      onValueChange={setValue}
166
      renderStepNumber={true}
167
    />
168
  );
169
}
170

171
// Rating slider with numbers
172
function RatingSlider() {
173
  const [rating, setRating] = useState(3);
174
  
175
  return (
176
    <View>
177
      <Text>Rating: {rating}/5</Text>
178
      <Slider
179
        style={{width: 250, height: 50}}
180
        minimumValue={1}
181
        maximumValue={5}
182
        step={1}
183
        value={rating}
184
        onValueChange={setRating}
185
        renderStepNumber={true}
186
      />
187
    </View>
188
  );
189
}
190
```
191

192
### Combined Step Features
193

194
Using both custom markers and step numbers together.
195

196
```typescript { .api }
197
interface CombinedStepProps {
198
  StepMarker?: FC<MarkerProps>;
199
  renderStepNumber?: boolean;
200
}
201
```
202

203
**Usage Examples:**
204

205
```typescript
206
import React, { useState } from 'react';
207
import { View, Text } from 'react-native';
208
import Slider from '@react-native-community/slider';
209

210
// Star rating marker
211
const StarMarker: React.FC<MarkerProps> = ({ stepMarked }) => {
212
  return (
213
    <Text style={{
214
      fontSize: 20,
215
      color: stepMarked ? '#FFD700' : '#CCCCCC',
216
    }}>
217
      ★
218
    </Text>
219
  );
220
};
221

222
// Combined star markers with numbers
223
function StarRatingSlider() {
224
  const [rating, setRating] = useState(3);
225
  
226
  return (
227
    <View>
228
      <Text>Star Rating: {rating}/5</Text>
229
      <Slider
230
        style={{width: 250, height: 60}}
231
        minimumValue={1}
232
        maximumValue={5}
233
        step={1}
234
        value={rating}
235
        onValueChange={setRating}
236
        StepMarker={StarMarker}
237
        renderStepNumber={true}
238
      />
239
    </View>
240
  );
241
}
242
```
243

244
### Advanced Step Configurations
245

246
Complex step configurations with dynamic markers and conditional rendering.
247

248
**Usage Examples:**
249

250
```typescript
251
import React, { useState } from 'react';
252
import { View, Text } from 'react-native';
253
import Slider from '@react-native-community/slider';
254

255
// Dynamic step marker based on value ranges
256
const DynamicStepMarker: React.FC<MarkerProps> = ({ 
257
  stepMarked, 
258
  currentValue, 
259
  index, 
260
  min, 
261
  max 
262
}) => {
263
  const percentage = ((index - min) / (max - min)) * 100;
264
  let color = '#CCCCCC';
265
  
266
  if (stepMarked) {
267
    if (percentage < 25) color = '#FF4444';      // Red for low values
268
    else if (percentage < 50) color = '#FF8800'; // Orange
269
    else if (percentage < 75) color = '#FFDD00'; // Yellow
270
    else color = '#44FF44';                      // Green for high values
271
  }
272
  
273
  return (
274
    <View style={{
275
      width: 8 + (stepMarked ? 4 : 0),
276
      height: 8 + (stepMarked ? 4 : 0),
277
      borderRadius: 6,
278
      backgroundColor: color,
279
      borderWidth: stepMarked ? 2 : 1,
280
      borderColor: '#FFFFFF',
281
    }} />
282
  );
283
};
284

285
// Progress/level slider
286
function ProgressSlider() {
287
  const [progress, setProgress] = useState(50);
288
  
289
  const getProgressLabel = (value: number) => {
290
    if (value < 25) return 'Beginner';
291
    if (value < 50) return 'Intermediate';
292
    if (value < 75) return 'Advanced';
293
    return 'Expert';
294
  };
295
  
296
  return (
297
    <View>
298
      <Text>Progress: {progress}% - {getProgressLabel(progress)}</Text>
299
      <Slider
300
        style={{width: 300, height: 50}}
301
        minimumValue={0}
302
        maximumValue={100}
303
        step={10}
304
        value={progress}
305
        onValueChange={setProgress}
306
        StepMarker={DynamicStepMarker}
307
        renderStepNumber={true}
308
      />
309
    </View>
310
  );
311
}
312
```
313

314
## Types
315

316
### Step-Related Type Definitions
317

318
```typescript { .api }
319
import type { FC } from 'react';
320

321
interface MarkerProps {
322
  stepMarked: boolean;
323
  currentValue: number;
324
  index: number;
325
  min: number;
326
  max: number;
327
}
328

329
interface TrackMarksProps {
330
  isTrue: boolean;
331
  index: number;
332
  thumbImage?: ImageURISource;
333
  StepMarker?: FC<MarkerProps>;
334
  currentValue: number;
335
  min: number;
336
  max: number;
337
}
338

339
interface SliderStepProps {
340
  StepMarker?: FC<MarkerProps>;
341
  renderStepNumber?: boolean;
342
}
343
```
344

345
### Internal Component Types
346

347
```typescript { .api }
348
// Internal component for rendering step indicators (not directly exported)
349
interface StepsIndicatorProps {
350
  options: number[];
351
  sliderWidth: number;
352
  currentValue: number;
353
  StepMarker?: FC<MarkerProps>;
354
  renderStepNumber?: boolean;
355
  thumbImage?: ImageURISource;
356
  isLTR?: boolean;
357
}
358

359
// Internal component for step numbers (not directly exported)
360
interface StepNumberProps {
361
  i: number;
362
  style: StyleProp<TextStyle>;
363
}
364
```