0
# Accessibility & Limits
1

2
Accessibility features for screen reader support and value limits for enhanced user experience and precise control over slider boundaries.
3

4
## Capabilities
5

6
### Accessibility Features
7

8
Screen reader support with custom units and increment descriptions for improved accessibility.
9

10
```typescript { .api }
11
interface SliderAccessibilityProps {
12
  /**
13
   * A string of one or more words to be announced by the screen reader.
14
   * Otherwise, it will announce the value as a percentage.
15
   * Requires passing a value to `accessibilityIncrements` to work correctly.
16
   * Should be a plural word, as singular units will be handled.
17
   */
18
  accessibilityUnits?: string;
19

20
  /**
21
   * An array of values that represent the different increments displayed
22
   * by the slider. All the values passed into this prop must be strings.
23
   * Requires passing a value to `accessibilityUnits` to work correctly.
24
   * The number of elements must be the same as `maximumValue`.
25
   */
26
  accessibilityIncrements?: Array<string>;
27

28
  /**
29
   * Callback for accessibility actions performed on the slider.
30
   */
31
  onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
32
}
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import React, { useState } from 'react';
39
import { View, Text } from 'react-native';
40
import Slider from '@react-native-community/slider';
41

42
// Temperature slider with accessibility
43
function TemperatureSlider() {
44
  const [temperature, setTemperature] = useState(20);
45
  
46
  return (
47
    <View>
48
      <Text>Temperature: {temperature}°C</Text>
49
      <Slider
50
        style={{width: 300, height: 40}}
51
        minimumValue={0}
52
        maximumValue={40}
53
        step={1}
54
        value={temperature}
55
        onValueChange={setTemperature}
56
        accessibilityUnits="degrees"
57
        accessibilityIncrements={Array.from({length: 41}, (_, i) => `${i} degrees Celsius`)}
58
      />
59
    </View>
60
  );
61
}
62

63
// Volume slider with accessibility
64
function VolumeSlider() {
65
  const [volume, setVolume] = useState(50);
66
  
67
  const volumeIncrements = Array.from({length: 101}, (_, i) => {
68
    if (i === 0) return 'muted';
69
    if (i <= 25) return `${i} percent, quiet`;
70
    if (i <= 75) return `${i} percent, moderate`;
71
    return `${i} percent, loud`;
72
  });
73
  
74
  return (
75
    <View>
76
      <Text>Volume: {volume}%</Text>
77
      <Slider
78
        style={{width: 300, height: 40}}
79
        minimumValue={0}
80
        maximumValue={100}
81
        step={1}
82
        value={volume}
83
        onValueChange={setVolume}
84
        accessibilityUnits="percent"
85
        accessibilityIncrements={volumeIncrements}
86
      />
87
    </View>
88
  );
89
}
90

91
// Rating slider with descriptive accessibility
92
function AccessibleRatingSlider() {
93
  const [rating, setRating] = useState(3);
94
  
95
  const ratingDescriptions = [
96
    'one star, terrible',
97
    'two stars, poor', 
98
    'three stars, fair',
99
    'four stars, good',
100
    'five stars, excellent'
101
  ];
102
  
103
  return (
104
    <View>
105
      <Text>Rating: {rating}/5</Text>
106
      <Slider
107
        style={{width: 250, height: 40}}
108
        minimumValue={1}
109
        maximumValue={5}
110
        step={1}
111
        value={rating}
112
        onValueChange={setRating}
113
        accessibilityUnits="stars"
114
        accessibilityIncrements={ratingDescriptions}
115
      />
116
    </View>
117
  );
118
}
119
```
120

121
### Value Limits
122

123
Upper and lower bounds that restrict user interaction beyond the minimum and maximum values.
124

125
```typescript { .api }
126
interface SliderLimitProps {
127
  /**
128
   * The lower limit value of the slider. The user won't be able to slide below this limit.
129
   */
130
  lowerLimit?: number;
131

132
  /**
133
   * The upper limit value of the slider. The user won't be able to slide above this limit.
134
   */
135
  upperLimit?: number;
136
}
137
```
138

139
**Usage Examples:**
140

141
```typescript
142
import React, { useState } from 'react';
143
import { View, Text, Alert } from 'react-native';
144
import Slider from '@react-native-community/slider';
145

146
// Restricted range slider
147
function RestrictedSlider() {
148
  const [value, setValue] = useState(50);
149
  
150
  return (
151
    <View>
152
      <Text>Value: {value} (Range: 20-80, Limits: 30-70)</Text>
153
      <Slider
154
        style={{width: 300, height: 40}}
155
        minimumValue={20}
156
        maximumValue={80}
157
        value={value}
158
        onValueChange={setValue}
159
        lowerLimit={30}  // User can't slide below 30
160
        upperLimit={70}  // User can't slide above 70
161
      />
162
    </View>
163
  );
164
}
165

166
// Safe operating range slider
167
function SafeOperatingSlider() {
168
  const [speed, setSpeed] = useState(50);
169
  
170
  // Warn if limits would be invalid
171
  React.useEffect(() => {
172
    const lowerLimit = 20;
173
    const upperLimit = 80;
174
    
175
    if (lowerLimit >= upperLimit) {
176
      Alert.alert('Configuration Error', 'Lower limit must be smaller than upper limit');
177
    }
178
  }, []);
179
  
180
  return (
181
    <View>
182
      <Text>Engine Speed: {speed} RPM</Text>
183
      <Text style={{fontSize: 12, color: '#666'}}>
184
        Safe Operating Range: 20-80 RPM
185
      </Text>
186
      <Slider
187
        style={{width: 300, height: 40}}
188
        minimumValue={0}
189
        maximumValue={100}
190
        value={speed}
191
        onValueChange={setSpeed}
192
        lowerLimit={20}   // Minimum safe operating speed
193
        upperLimit={80}   // Maximum safe operating speed
194
      />
195
    </View>
196
  );
197
}
198

199
// Dynamic limits based on conditions
200
function DynamicLimitsSlider() {
201
  const [value, setValue] = useState(50);
202
  const [isRestricted, setIsRestricted] = useState(false);
203
  
204
  const lowerLimit = isRestricted ? 30 : undefined;
205
  const upperLimit = isRestricted ? 70 : undefined;
206
  
207
  return (
208
    <View>
209
      <Text>Value: {value}</Text>
210
      <Text>Restricted Mode: {isRestricted ? 'ON' : 'OFF'}</Text>
211
      
212
      <Slider
213
        style={{width: 300, height: 40}}
214
        minimumValue={0}
215
        maximumValue={100}
216
        value={value}
217
        onValueChange={setValue}
218
        lowerLimit={lowerLimit}
219
        upperLimit={upperLimit}
220
      />
221
      
222
      <Button
223
        title={`Toggle Restrictions ${isRestricted ? 'OFF' : 'ON'}`}
224
        onPress={() => setIsRestricted(!isRestricted)}
225
      />
226
    </View>
227
  );
228
}
229
```
230

231
### Combined Accessibility and Limits
232

233
Using accessibility features together with value limits for comprehensive user experience.
234

235
**Usage Examples:**
236

237
```typescript
238
import React, { useState } from 'react';
239
import { View, Text } from 'react-native';
240
import Slider from '@react-native-community/slider';
241

242
// Thermostat with safe range and accessibility
243
function ThermostatSlider() {
244
  const [temperature, setTemperature] = useState(22);
245
  
246
  const temperatureDescriptions = Array.from({length: 41}, (_, i) => {
247
    const temp = i + 10; // 10-50°C range
248
    if (temp < 16) return `${temp} degrees, very cold`;
249
    if (temp < 20) return `${temp} degrees, cold`;
250
    if (temp < 24) return `${temp} degrees, comfortable`;
251
    if (temp < 28) return `${temp} degrees, warm`;
252
    return `${temp} degrees, hot`;
253
  });
254
  
255
  return (
256
    <View>
257
      <Text>Thermostat: {temperature}°C</Text>
258
      <Text style={{fontSize: 12, color: '#666'}}>
259
        Eco Range: 18-26°C (Recommended)
260
      </Text>
261
      <Slider
262
        style={{width: 300, height: 40}}
263
        minimumValue={10}
264
        maximumValue={50}
265
        step={1}
266
        value={temperature}
267
        onValueChange={setTemperature}
268
        lowerLimit={16}    // Energy-efficient lower bound
269
        upperLimit={28}    // Energy-efficient upper bound
270
        accessibilityUnits="degrees"
271
        accessibilityIncrements={temperatureDescriptions}
272
      />
273
    </View>
274
  );
275
}
276

277
// Audio mixer channel with limits and accessibility
278
function AudioChannelSlider() {
279
  const [gain, setGain] = useState(0);
280
  
281
  const gainDescriptions = Array.from({length: 121}, (_, i) => {
282
    const db = i - 60; // -60dB to +60dB
283
    if (db < -40) return `${db} decibels, very quiet`;
284
    if (db < -20) return `${db} decibels, quiet`;
285
    if (db < 0) return `${db} decibels, moderate`;
286
    if (db < 20) return `${db} decibels, loud`;
287
    return `${db} decibels, very loud`;
288
  });
289
  
290
  return (
291
    <View>
292
      <Text>Channel Gain: {gain - 60}dB</Text>
293
      <Text style={{fontSize: 12, color: '#666'}}>
294
        Safe Range: -40dB to +20dB
295
      </Text>
296
      <Slider
297
        style={{width: 300, height: 40}}
298
        minimumValue={0}    // Represents -60dB
299
        maximumValue={120}  // Represents +60dB
300
        step={1}
301
        value={gain}
302
        onValueChange={setGain}
303
        lowerLimit={20}     // -40dB limit
304
        upperLimit={80}     // +20dB limit  
305
        accessibilityUnits="decibels"
306
        accessibilityIncrements={gainDescriptions}
307
      />
308
    </View>
309
  );
310
}
311
```
312

313
### Accessibility Best Practices
314

315
Guidelines for implementing accessible sliders.
316

317
**Usage Examples:**
318

319
```typescript
320
import React, { useState } from 'react';
321
import { View, Text } from 'react-native';
322
import Slider from '@react-native-community/slider';
323

324
// Best practice: Descriptive accessibility
325
function BestPracticeSlider() {
326
  const [brightness, setBrightness] = useState(75);
327
  
328
  // Create meaningful descriptions
329
  const brightnessIncrements = Array.from({length: 101}, (_, i) => {
330
    if (i === 0) return 'minimum brightness, screen very dim';
331
    if (i <= 25) return `${i} percent brightness, dim`;
332
    if (i <= 50) return `${i} percent brightness, moderate`;  
333
    if (i <= 75) return `${i} percent brightness, bright`;
334
    if (i === 100) return 'maximum brightness, screen very bright';
335
    return `${i} percent brightness, very bright`;
336
  });
337
  
338
  return (
339
    <View>
340
      <Text>Screen Brightness: {brightness}%</Text>
341
      <Slider
342
        style={{width: 300, height: 40}}
343
        minimumValue={0}
344
        maximumValue={100}
345
        step={1}
346
        value={brightness}
347
        onValueChange={setBrightness}
348
        accessibilityUnits="percent"
349
        accessibilityIncrements={brightnessIncrements}
350
        // Standard accessibility props
351
        accessibilityLabel="Screen brightness slider"
352
        accessibilityHint="Adjust the screen brightness level"
353
        accessibilityRole="adjustable"
354
      />
355
    </View>
356
  );
357
}
358
```
359

360
## Types
361

362
### Accessibility Type Definitions
363

364
```typescript { .api }
365
interface AccessibilityActionEvent {
366
  nativeEvent: {
367
    actionName: string;
368
    target?: number;
369
  };
370
}
371

372
interface SliderAccessibilityProps {
373
  accessibilityUnits?: string;
374
  accessibilityIncrements?: Array<string>;
375
  onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
376
}
377

378
interface SliderLimitProps {
379
  lowerLimit?: number;
380
  upperLimit?: number;
381
}
382

383
// Combined interface
384
interface SliderAccessibilityAndLimitsProps 
385
  extends SliderAccessibilityProps, SliderLimitProps {
386
  // Inherits all accessibility and limit properties
387
}
388
```
389

390
### Constants for Limits
391

392
```typescript { .api }
393
// Internal constants used for default limit values
394
interface SliderConstants {
395
  LIMIT_MIN_VALUE: number;  // Number.MIN_SAFE_INTEGER
396
  LIMIT_MAX_VALUE: number;  // Number.MAX_SAFE_INTEGER
397
}
398
```