React Slider UI Component (rc-slider)

11.1.9 · active · verified Sun Apr 19

rc-slider is a highly customizable UI component library for React applications, providing robust single-value sliders and dual-handle range input controls. The current stable version is 11.1.9, which receives active maintenance releases primarily focused on bug fixes and minor feature enhancements. While release cadence is not strictly fixed, updates appear frequently, addressing issues and improving accessibility. A key differentiator is its straightforward API for configuring marks, steps, and various callbacks, along with a `createSliderWithTooltip` utility for enhancing handle interactions. The library ships with comprehensive TypeScript definitions, facilitating type-safe development, and supports both modern ESM imports and CommonJS patterns. It's a foundational component used in many larger Ant Design ecosystem projects.

Common errors

```
Failed to compile. Module not found: Error: Can't resolve 'rc-slider/assets/index.css'
```
cause The required CSS file for `rc-slider` styling is missing from your project's imports.

fix Add `import 'rc-slider/assets/index.css';` to your application's entry point or the component file where `rc-slider` is used.
```
TypeError: Cannot read properties of undefined (reading 'tipFormatter')
```
cause The `tipFormatter` prop received an `undefined` value, leading to a runtime error when trying to format a non-existent value.

fix Ensure that `tipFormatter` is only called with defined values, or update to `rc-slider@11.1.8` or newer which includes a fix for this specific issue.
```
TypeError: onDelete is not a function
```
cause An internal or custom `onDelete` function was expected but not found or was incorrectly called.

fix This was a bug fixed in `rc-slider@11.1.9`. Upgrade to `v11.1.9` or later to resolve this specific error.
```
Warning: useLayoutEffect does nothing in Node. Consider using useEffect instead.
```
cause Older versions of `rc-slider` used `useLayoutEffect` in a way that caused warnings during server-side rendering (SSR) environments.

fix Upgrade `rc-slider` to version `11.1.7` or newer, which contains a fix for this `useLayoutEffect` warning.

Warnings

gotcha It is crucial to import the default CSS styles for rc-slider (from `rc-slider/assets/index.css`) or your components will render unstyled. This is often overlooked in new setups.
Fix: Add `import 'rc-slider/assets/index.css';` to your entry file or component where the slider is used.
deprecated There is a newer package `@rc-component/slider` (currently v1.x) in the React Component ecosystem. While `rc-slider` (v11.x) is still actively maintained, consider if the new package is a better fit for new projects or future migrations.
Fix: Evaluate `@rc-component/slider` for new projects or plan a migration for existing ones if deemed beneficial. Check its documentation for breaking changes.
gotcha Using `createSliderWithTooltip` with default `Slider` or `Range` components from `rc-slider` requires accessing it as a property of the default export, i.e., `Slider.createSliderWithTooltip` for ESM, or `require('rc-slider').createSliderWithTooltip` for CJS. It's not a direct named export.
Fix: Ensure you destructure or access `createSliderWithTooltip` correctly from the main `Slider` import or `require` call.
gotcha Versions prior to `v11.1.7` might encounter `useLayoutEffect` warnings during server-side rendering (SSR) or in specific React concurrent mode setups.
Fix: Upgrade `rc-slider` to version `11.1.7` or newer to resolve `useLayoutEffect` related warnings.

Install

npm install rc-slider npm
yarn add rc-slider yarn
pnpm add rc-slider pnpm

Imports

Slider

wrong:

import { Slider } from 'rc-slider';

correct:

import Slider from 'rc-slider';

Slider is the default export.

Range

wrong:

import Range from 'rc-slider';

correct:

import { Range } from 'rc-slider';

Range is a named export, not the default.

createSliderWithTooltip
wrong:
```
import { createSliderWithTooltip } from 'rc-slider';
```
correct:
```
import Slider from 'rc-slider';
const createSliderWithTooltip = Slider.createSliderWithTooltip;
```
This utility is a property of the default export. For CommonJS: `const createSliderWithTooltip = require('rc-slider').createSliderWithTooltip;`
CSS Styles
wrong:
```
import 'rc-slider/dist/rc-slider.css';
```
correct:
```
import 'rc-slider/assets/index.css';
```
Always import the CSS directly from `assets/index.css` to ensure correct styling.

Quickstart

Demonstrates the basic `Slider` and `Range` components, including how to import the necessary CSS and how to use the `createSliderWithTooltip` utility to add value tooltips to handles.

import React from 'react';
import Slider, { Range } from 'rc-slider';
import 'rc-slider/assets/index.css';

const createSliderWithTooltip = Slider.createSliderWithTooltip;
const SliderWithTooltip = createSliderWithTooltip(Slider);
const RangeWithTooltip = createSliderWithTooltip(Range);

export default function MySliders() {
  return (
    <div style={{ padding: 20, width: '80%', margin: '0 auto' }}>
      <h3>Basic Slider</h3>
      <Slider defaultValue={50} min={0} max={100} onChange={val => console.log('Slider value:', val)} />

      <h3>Range Slider</h3>
      <Range defaultValue={[20, 80]} min={0} max={100} onChange={vals => console.log('Range values:', vals)} />

      <h3>Slider with Tooltip</h3>
      <SliderWithTooltip defaultValue={30} min={0} max={100} tipFormatter={val => `${val}%`} />

      <h3>Range with Tooltip</h3>
      <RangeWithTooltip defaultValue={[10, 60]} min={0} max={100} tipFormatter={val => `${val} units`} />
    </div>
  );
}

view raw JSON →