Accessibility & Limits

interface SliderAccessibilityProps {
  /**
   * A string of one or more words to be announced by the screen reader.
   * Otherwise, it will announce the value as a percentage.
   * Requires passing a value to `accessibilityIncrements` to work correctly.
   * Should be a plural word, as singular units will be handled.
   */
  accessibilityUnits?: string;

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

  /**
   * Callback for accessibility actions performed on the slider.
   */
  onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
}

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Slider from '@react-native-community/slider';

// Temperature slider with accessibility
function TemperatureSlider() {
  const [temperature, setTemperature] = useState(20);
  
  return (
    <View>
      <Text>Temperature: {temperature}°C</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={40}
        step={1}
        value={temperature}
        onValueChange={setTemperature}
        accessibilityUnits="degrees"
        accessibilityIncrements={Array.from({length: 41}, (_, i) => `${i} degrees Celsius`)}
      />
    </View>
  );
}

// Volume slider with accessibility
function VolumeSlider() {
  const [volume, setVolume] = useState(50);
  
  const volumeIncrements = Array.from({length: 101}, (_, i) => {
    if (i === 0) return 'muted';
    if (i <= 25) return `${i} percent, quiet`;
    if (i <= 75) return `${i} percent, moderate`;
    return `${i} percent, loud`;
  });
  
  return (
    <View>
      <Text>Volume: {volume}%</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={100}
        step={1}
        value={volume}
        onValueChange={setVolume}
        accessibilityUnits="percent"
        accessibilityIncrements={volumeIncrements}
      />
    </View>
  );
}

// Rating slider with descriptive accessibility
function AccessibleRatingSlider() {
  const [rating, setRating] = useState(3);
  
  const ratingDescriptions = [
    'one star, terrible',
    'two stars, poor', 
    'three stars, fair',
    'four stars, good',
    'five stars, excellent'
  ];
  
  return (
    <View>
      <Text>Rating: {rating}/5</Text>
      <Slider
        style={{width: 250, height: 40}}
        minimumValue={1}
        maximumValue={5}
        step={1}
        value={rating}
        onValueChange={setRating}
        accessibilityUnits="stars"
        accessibilityIncrements={ratingDescriptions}
      />
    </View>
  );
}

interface SliderLimitProps {
  /**
   * The lower limit value of the slider. The user won't be able to slide below this limit.
   */
  lowerLimit?: number;

  /**
   * The upper limit value of the slider. The user won't be able to slide above this limit.
   */
  upperLimit?: number;
}

import React, { useState } from 'react';
import { View, Text, Alert } from 'react-native';
import Slider from '@react-native-community/slider';

// Restricted range slider
function RestrictedSlider() {
  const [value, setValue] = useState(50);
  
  return (
    <View>
      <Text>Value: {value} (Range: 20-80, Limits: 30-70)</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={20}
        maximumValue={80}
        value={value}
        onValueChange={setValue}
        lowerLimit={30}  // User can't slide below 30
        upperLimit={70}  // User can't slide above 70
      />
    </View>
  );
}

// Safe operating range slider
function SafeOperatingSlider() {
  const [speed, setSpeed] = useState(50);
  
  // Warn if limits would be invalid
  React.useEffect(() => {
    const lowerLimit = 20;
    const upperLimit = 80;
    
    if (lowerLimit >= upperLimit) {
      Alert.alert('Configuration Error', 'Lower limit must be smaller than upper limit');
    }
  }, []);
  
  return (
    <View>
      <Text>Engine Speed: {speed} RPM</Text>
      <Text style={{fontSize: 12, color: '#666'}}>
        Safe Operating Range: 20-80 RPM
      </Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={100}
        value={speed}
        onValueChange={setSpeed}
        lowerLimit={20}   // Minimum safe operating speed
        upperLimit={80}   // Maximum safe operating speed
      />
    </View>
  );
}

// Dynamic limits based on conditions
function DynamicLimitsSlider() {
  const [value, setValue] = useState(50);
  const [isRestricted, setIsRestricted] = useState(false);
  
  const lowerLimit = isRestricted ? 30 : undefined;
  const upperLimit = isRestricted ? 70 : undefined;
  
  return (
    <View>
      <Text>Value: {value}</Text>
      <Text>Restricted Mode: {isRestricted ? 'ON' : 'OFF'}</Text>
      
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={100}
        value={value}
        onValueChange={setValue}
        lowerLimit={lowerLimit}
        upperLimit={upperLimit}
      />
      
      <Button
        title={`Toggle Restrictions ${isRestricted ? 'OFF' : 'ON'}`}
        onPress={() => setIsRestricted(!isRestricted)}
      />
    </View>
  );
}

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Slider from '@react-native-community/slider';

// Thermostat with safe range and accessibility
function ThermostatSlider() {
  const [temperature, setTemperature] = useState(22);
  
  const temperatureDescriptions = Array.from({length: 41}, (_, i) => {
    const temp = i + 10; // 10-50°C range
    if (temp < 16) return `${temp} degrees, very cold`;
    if (temp < 20) return `${temp} degrees, cold`;
    if (temp < 24) return `${temp} degrees, comfortable`;
    if (temp < 28) return `${temp} degrees, warm`;
    return `${temp} degrees, hot`;
  });
  
  return (
    <View>
      <Text>Thermostat: {temperature}°C</Text>
      <Text style={{fontSize: 12, color: '#666'}}>
        Eco Range: 18-26°C (Recommended)
      </Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={10}
        maximumValue={50}
        step={1}
        value={temperature}
        onValueChange={setTemperature}
        lowerLimit={16}    // Energy-efficient lower bound
        upperLimit={28}    // Energy-efficient upper bound
        accessibilityUnits="degrees"
        accessibilityIncrements={temperatureDescriptions}
      />
    </View>
  );
}

// Audio mixer channel with limits and accessibility
function AudioChannelSlider() {
  const [gain, setGain] = useState(0);
  
  const gainDescriptions = Array.from({length: 121}, (_, i) => {
    const db = i - 60; // -60dB to +60dB
    if (db < -40) return `${db} decibels, very quiet`;
    if (db < -20) return `${db} decibels, quiet`;
    if (db < 0) return `${db} decibels, moderate`;
    if (db < 20) return `${db} decibels, loud`;
    return `${db} decibels, very loud`;
  });
  
  return (
    <View>
      <Text>Channel Gain: {gain - 60}dB</Text>
      <Text style={{fontSize: 12, color: '#666'}}>
        Safe Range: -40dB to +20dB
      </Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}    // Represents -60dB
        maximumValue={120}  // Represents +60dB
        step={1}
        value={gain}
        onValueChange={setGain}
        lowerLimit={20}     // -40dB limit
        upperLimit={80}     // +20dB limit  
        accessibilityUnits="decibels"
        accessibilityIncrements={gainDescriptions}
      />
    </View>
  );
}

import React, { useState } from 'react';
import { View, Text } from 'react-native';
import Slider from '@react-native-community/slider';

// Best practice: Descriptive accessibility
function BestPracticeSlider() {
  const [brightness, setBrightness] = useState(75);
  
  // Create meaningful descriptions
  const brightnessIncrements = Array.from({length: 101}, (_, i) => {
    if (i === 0) return 'minimum brightness, screen very dim';
    if (i <= 25) return `${i} percent brightness, dim`;
    if (i <= 50) return `${i} percent brightness, moderate`;  
    if (i <= 75) return `${i} percent brightness, bright`;
    if (i === 100) return 'maximum brightness, screen very bright';
    return `${i} percent brightness, very bright`;
  });
  
  return (
    <View>
      <Text>Screen Brightness: {brightness}%</Text>
      <Slider
        style={{width: 300, height: 40}}
        minimumValue={0}
        maximumValue={100}
        step={1}
        value={brightness}
        onValueChange={setBrightness}
        accessibilityUnits="percent"
        accessibilityIncrements={brightnessIncrements}
        // Standard accessibility props
        accessibilityLabel="Screen brightness slider"
        accessibilityHint="Adjust the screen brightness level"
        accessibilityRole="adjustable"
      />
    </View>
  );
}

interface AccessibilityActionEvent {
  nativeEvent: {
    actionName: string;
    target?: number;
  };
}

interface SliderAccessibilityProps {
  accessibilityUnits?: string;
  accessibilityIncrements?: Array<string>;
  onAccessibilityAction?: (event: AccessibilityActionEvent) => void;
}

interface SliderLimitProps {
  lowerLimit?: number;
  upperLimit?: number;
}

// Combined interface
interface SliderAccessibilityAndLimitsProps 
  extends SliderAccessibilityProps, SliderLimitProps {
  // Inherits all accessibility and limit properties
}

// Internal constants used for default limit values
interface SliderConstants {
  LIMIT_MIN_VALUE: number;  // Number.MIN_SAFE_INTEGER
  LIMIT_MAX_VALUE: number;  // Number.MAX_SAFE_INTEGER
}