react-native-a11y-slider v1.3.2

React Native Accessible Slider

A slider that supports assistive devices, like screen readers, out of the box.

The slider can be setup to either have a single value or define a two value range (min/max).

Getting Started

yarn add react-native-a11y-slider

or

npm install -S react-native-a11y-slider

Creates a basic slider that with a min/max slider and a total range from 1 to 100.

import Slider from "react-native-a11y-slider";

function Example() {
  return <Slider min={1} max={100} values={[10, 87]} />;
}

Props

Custom Marker

You can customize the marker dot (also known as a "thumb") by passing a custom Marker Component in the props.

NOTE: In order for the slider to know how to calculate steps without unnecessary rendering flashes, your component MUST define a static size property.

You can use Marker.tsx as an example

import React from "react";
import { View } from "react-native";
import { MarkerProps } from "react-native-a11y-slider";

function MyMarker({ color }: MarkerProps) {
  return (
    <View
      style={{
        backgroundColor: "red",
        height: MyMarker.size,
        width: MyMarker.size,
      }}
    />
  );
}
Marker.size = 30;
export default MyMarker;

import Slider from "react-native-a11y-slider";
import MyMarker from "./MyMarker";

function SliderExample() {
  return (
    <Slider min={1} max={100} values={[10, 87]} markerComponent={MyMarker} />
  );
}

Accessibility values

For a screen reader, each slider marker thumb will have the following accessibility attributes defined:

• accessibilityLabel
• accessibilityRole: 'adjustable'
• accessibilityValue
  • min
  • max
  • now
  • text
• accessibilityActions: [{ name: "increment" }, { name: "decrement" }]
• onAccessibilityAction: <internal function>

(learn more about React Native accessibility attributes)

If you want to customize any of the values (except for accessibilityActions and onAccessibilityAction), you can define a setA11yMarkerProps callback function. This function will be called each time the marker is rendered or moved.

import React from "react";
import Slider, {
  MarkerType,
  setA11yMarkerPropsFunctionArgs,
} from "react-native-a11y-slider";
import MyMarker from "./MyMarker";

function DistanceSlider() {
  const setA11yProps = useCallback(
    ({ markerType, value, minValue, maxValue }: setA11yMarkerPropsFunctionArgs) => {

      let accessibilityLabel = "Min distance";
      if (markerType === MarkerType.UPPER) {
        accessibilityLabel = "Max distance";
      }

      const accessibilityValue = {
        min: minValue,
        max: maxValue,
        now: value,
        text: `${value} miles`,
      },

      return {
        accessibilityLabel,
        accessibilityValue
      };
    },
    []
  );

  return (
    <Slider
      min={1}
      max={100}
      values={[10, 87]}
      setA11yMarkerProps={setA11yProps}
    />
  );
}