@radix-ui/react-slider

What is @radix-ui/react-slider?

@radix-ui/react-slider is a React component library for creating accessible and customizable sliders. It provides a range of features to create sliders with various configurations and styles, ensuring they are accessible and easy to use.

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

Basic Slider

This code demonstrates a basic slider with a default value of 50, a maximum value of 100, and a step increment of 1.

import { Slider } from '@radix-ui/react-slider';

function BasicSlider() {
  return (
    <Slider defaultValue={[50]} max={100} step={1} />
  );
}

Range Slider

This code demonstrates a range slider with default values of 20 and 80, a maximum value of 100, and a step increment of 1.

import { Slider } from '@radix-ui/react-slider';

function RangeSlider() {
  return (
    <Slider defaultValue={[20, 80]} max={100} step={1} />
  );
}

Vertical Slider

This code demonstrates a vertical slider with a default value of 50, a maximum value of 100, and a step increment of 1.

import { Slider } from '@radix-ui/react-slider';

function VerticalSlider() {
  return (
    <Slider orientation="vertical" defaultValue={[50]} max={100} step={1} />
  );
}

Custom Styled Slider

This code demonstrates a slider with custom styles applied via a CSS class. The custom styles can be defined in a separate CSS file.

import { Slider } from '@radix-ui/react-slider';
import './customSlider.css';

function CustomStyledSlider() {
  return (
    <Slider className="custom-slider" defaultValue={[50]} max={100} step={1} />
  );
}

Other packages similar to @radix-ui/react-slider

rc-slider

rc-slider is a React component for creating sliders. It offers a wide range of customization options and supports both single and range sliders. Compared to @radix-ui/react-slider, rc-slider provides more built-in features but may require additional effort to ensure accessibility.

react-slider

react-slider is a small, accessible slider component for React. It focuses on providing a simple and accessible API for creating sliders. While it may not offer as many customization options as @radix-ui/react-slider, it is lightweight and easy to use.

material-ui

Material-UI is a popular React component library that includes a Slider component. The Material-UI Slider is highly customizable and follows the Material Design guidelines. It offers a rich set of features and is well-documented, making it a strong alternative to @radix-ui/react-slider.

README

react-slider

Installation

$ yarn add @radix-ui/react-slider
# or
$ npm install @radix-ui/react-slider

Usage

View docs here.