@react-aria/slider

What is @react-aria/slider?

@react-aria/slider is a React library that provides accessible slider components. It is part of the React Aria collection of hooks and components that help build accessible web applications. The package offers a range of features to create sliders that are keyboard navigable and screen reader friendly.

What are @react-aria/slider's main functionalities?

Single Slider

This code demonstrates how to create a single slider using @react-aria/slider. It includes the necessary hooks and components to ensure the slider is accessible.

import { useSlider, useSliderThumb } from '@react-aria/slider';
import { useSliderState } from '@react-stately/slider';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import { useRef } from 'react';

function SingleSlider(props) {
  let trackRef = useRef(null);
  let state = useSliderState(props);
  let { groupProps, trackProps, thumbProps } = useSlider(props, state, trackRef);
  let { thumbProps: thumbProps0, inputProps: inputProps0 } = useSliderThumb({ index: 0 }, state);

  return (
    <div {...groupProps}>
      <div {...trackProps} ref={trackRef} style={{ position: 'relative', height: '4px', background: 'gray' }}>
        <div {...thumbProps0} style={{ position: 'absolute', top: '-6px', left: `${state.getThumbPercent(0) * 100}%`, width: '20px', height: '20px', background: 'blue' }}>
          <VisuallyHidden>
            <input {...inputProps0} />
          </VisuallyHidden>
        </div>
      </div>
    </div>
  );
}

Range Slider

This code demonstrates how to create a range slider with two thumbs using @react-aria/slider. It ensures both thumbs are accessible and can be controlled via keyboard and screen readers.

import { useSlider, useSliderThumb } from '@react-aria/slider';
import { useSliderState } from '@react-stately/slider';
import { VisuallyHidden } from '@react-aria/visually-hidden';
import { useRef } from 'react';

function RangeSlider(props) {
  let trackRef = useRef(null);
  let state = useSliderState(props);
  let { groupProps, trackProps, thumbProps } = useSlider(props, state, trackRef);
  let { thumbProps: thumbProps0, inputProps: inputProps0 } = useSliderThumb({ index: 0 }, state);
  let { thumbProps: thumbProps1, inputProps: inputProps1 } = useSliderThumb({ index: 1 }, state);

  return (
    <div {...groupProps}>
      <div {...trackProps} ref={trackRef} style={{ position: 'relative', height: '4px', background: 'gray' }}>
        <div {...thumbProps0} style={{ position: 'absolute', top: '-6px', left: `${state.getThumbPercent(0) * 100}%`, width: '20px', height: '20px', background: 'blue' }}>
          <VisuallyHidden>
            <input {...inputProps0} />
          </VisuallyHidden>
        </div>
        <div {...thumbProps1} style={{ position: 'absolute', top: '-6px', left: `${state.getThumbPercent(1) * 100}%`, width: '20px', height: '20px', background: 'blue' }}>
          <VisuallyHidden>
            <input {...inputProps1} />
          </VisuallyHidden>
        </div>
      </div>
    </div>
  );
}

Other packages similar to @react-aria/slider

rc-slider

rc-slider is a React component for creating sliders. It offers a range of features including single and range sliders, custom marks, and tooltips. Compared to @react-aria/slider, rc-slider provides more customization options but may require additional work to ensure full accessibility.

react-slider

react-slider is a small, accessible slider component for React. It supports both single and range sliders and is designed with accessibility in mind. While it offers similar accessibility features as @react-aria/slider, it may not be as feature-rich in terms of customization and styling options.

react-input-range

react-input-range is a React component for creating input sliders. It supports single and range sliders and provides a simple API for customization. However, it may not be as focused on accessibility as @react-aria/slider, making it less suitable for applications that require strict accessibility compliance.

README

@react-aria/slider

This package is part of react-spectrum. See the repo for more details.