Web developer customizing a range slider in React with a red Maine Coon cat on the desk.

React-Range Slider Wizardry: A Developer's Guide

The Orange Cat
The Orange Cat

React-range is a powerful library that allows developers to create highly customizable and accessible range sliders in React applications. Whether you need a simple slider or a complex multi-thumb setup, react-range provides the flexibility and control you need. This guide will walk you through the basics and some advanced features of the library, making it easier for you to implement sliders in your projects.

Features

  • Supports vertical and horizontal sliding.
  • Unopinionated styling, compatible with CSS in JS.
  • No additional markup required; use your own HTML structure.
  • Keyboard accessible with ARIA patterns for assistive technologies.
  • Touchable and works seamlessly on mobile devices.
  • Handles negative and decimal values.
  • Stateless and controlled single component.
  • No dependencies, lightweight at 6kB (gzipped).
  • RTL (Right-to-Left) support for internationalization.

Installation

To get started with react-range, you can install it using either npm or yarn:

npm install react-range

or

yarn add react-range

Basic Usage

Creating a simple range slider with react-range is straightforward. Here’s a basic example to get you started:

import * as React from "react";
import { Range } from "react-range";

const SimpleSlider: React.FC = () => {
  const [values, setValues] = React.useState([50]);

  return (
    <Range
      values={values}
      step={1}
      min={0}
      max={100}
      onChange={(values) => setValues(values)}
      renderTrack={({ props, children }) => (
        <div
          {...props}
          style={{
            ...props.style,
            height: "6px",
            width: "100%",
            backgroundColor: "#ccc",
          }}
        >
          {children}
        </div>
      )}
      renderThumb={({ props }) => (
        <div
          {...props}
          style={{
            ...props.style,
            height: "24px",
            width: "24px",
            backgroundColor: "#999",
          }}
        />
      )}
    />
  );
};

export default SimpleSlider;

In this example, we use the Range component to create a slider that ranges from 0 to 100, with a single thumb starting at 50. The renderTrack and renderThumb props allow you to customize the appearance of the track and thumb.

Advanced Usage

React-range also supports more advanced configurations, such as multiple thumbs and custom track backgrounds. Here’s how you can implement a multi-thumb slider:

import * as React from "react";
import { Range, getTrackBackground } from "react-range";

const MultiThumbSlider: React.FC = () => {
  const [values, setValues] = React.useState([20, 80]);

  return (
    <Range
      values={values}
      step={1}
      min={0}
      max={100}
      onChange={(values) => setValues(values)}
      renderTrack={({ props, children }) => (
        <div
          {...props}
          style={{
            ...props.style,
            height: "6px",
            width: "100%",
            background: getTrackBackground({
              values,
              colors: ["#ccc", "#548BF4", "#ccc"],
              min: 0,
              max: 100,
            }),
          }}
        >
          {children}
        </div>
      )}
      renderThumb={({ props, index }) => (
        <div
          {...props}
          style={{
            ...props.style,
            height: "24px",
            width: "24px",
            backgroundColor: index === 0 ? "#FF5733" : "#33FF57",
          }}
        />
      )}
    />
  );
};

export default MultiThumbSlider;

This example demonstrates a slider with two thumbs. We use the getTrackBackground function to create a gradient effect on the track, visually indicating the range between the two thumbs. Each thumb is styled differently to enhance user interaction.

Conclusion

The react-range library is a versatile tool for building range sliders in React applications. Its unopinionated design allows you to fully customize the slider’s appearance and behavior, making it ideal for a variety of use cases. Whether you’re implementing a simple slider or a more complex configuration, react-range provides the necessary building blocks to create an intuitive and accessible user experience.

Comments