rc-slider

library11.1.9jsnpmunverified

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.

web-framework

npm install rc-slider

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RC-SLIDER

rc-slider

web-frameworkjavascriptv11.1.9

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Slider

✓ import Slider from 'rc-slider';

✗ import { Slider } from 'rc-slider';

Slider is the default export.

Range

✓ import { Range } from 'rc-slider';

✗ import Range from 'rc-slider';

Range is a named export, not the default.

createSliderWithTooltip

✓ import Slider from 'rc-slider'; const createSliderWithTooltip = Slider.createSliderWithTooltip;

✗ import { createSliderWithTooltip } from 'rc-slider';

This utility is a property of the default export. For CommonJS: `const createSliderWithTooltip = require('rc-slider').createSliderWithTooltip;`

CSS Styles

✓ import 'rc-slider/assets/index.css';

✗ import 'rc-slider/dist/rc-slider.css';

Always import the CSS directly from `assets/index.css` to ensure correct styling.

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> ); }

Debug

Known issues

gotchaIt 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.

affects: >=1.0.0

deprecatedThere 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.

affects: >=11.0.0

gotchaUsing `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.

affects: >=11.0.0

gotchaVersions 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.

affects: <11.1.7

Errors

Common errors & fixes

Failed to compile. Module not found: Error: Can't resolve 'rc-slider/assets/index.css'

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')

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

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.

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.

Upgrade

Version history

11.1.9latest on npm

Audit

Dependencies

reactrequiredReact is required for rendering UI components.

react-domrequiredReact DOM is required for rendering React components to the DOM.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/slider ↗

packagehttps://www.npmjs.com/package/rc-slider ↗

homepagehttps://react-component.github.io/slider ↗