{"id":11637,"library":"rc-slider","title":"React Slider UI Component (rc-slider)","description":"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.","status":"active","version":"11.1.9","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/react-component/slider","tags":["javascript","react","react-component","react-slider","slider","input","range","typescript"],"install":[{"cmd":"npm install rc-slider","lang":"bash","label":"npm"},{"cmd":"yarn add rc-slider","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-slider","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"React is required for rendering UI components.","package":"react","optional":false},{"reason":"React DOM is required for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"Slider is the default export.","wrong":"import { Slider } from 'rc-slider';","symbol":"Slider","correct":"import Slider from 'rc-slider';"},{"note":"Range is a named export, not the default.","wrong":"import Range from 'rc-slider';","symbol":"Range","correct":"import { Range } from 'rc-slider';"},{"note":"This utility is a property of the default export. For CommonJS: `const createSliderWithTooltip = require('rc-slider').createSliderWithTooltip;`","wrong":"import { createSliderWithTooltip } from 'rc-slider';","symbol":"createSliderWithTooltip","correct":"import Slider from 'rc-slider';\nconst createSliderWithTooltip = Slider.createSliderWithTooltip;"},{"note":"Always import the CSS directly from `assets/index.css` to ensure correct styling.","wrong":"import 'rc-slider/dist/rc-slider.css';","symbol":"CSS Styles","correct":"import 'rc-slider/assets/index.css';"}],"quickstart":{"code":"import React from 'react';\nimport Slider, { Range } from 'rc-slider';\nimport 'rc-slider/assets/index.css';\n\nconst createSliderWithTooltip = Slider.createSliderWithTooltip;\nconst SliderWithTooltip = createSliderWithTooltip(Slider);\nconst RangeWithTooltip = createSliderWithTooltip(Range);\n\nexport default function MySliders() {\n return (\n
\n

Basic Slider

\n console.log('Slider value:', val)} />\n\n

Range Slider

\n console.log('Range values:', vals)} />\n\n

Slider with Tooltip

\n `${val}%`} />\n\n

Range with Tooltip

\n `${val} units`} />\n
\n );\n}","lang":"typescript","description":"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."},"warnings":[{"fix":"Add `import 'rc-slider/assets/index.css';` to your entry file or component where the slider is used.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Evaluate `@rc-component/slider` for new projects or plan a migration for existing ones if deemed beneficial. Check its documentation for breaking changes.","message":"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.","severity":"deprecated","affected_versions":">=11.0.0"},{"fix":"Ensure you destructure or access `createSliderWithTooltip` correctly from the main `Slider` import or `require` call.","message":"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.","severity":"gotcha","affected_versions":">=11.0.0"},{"fix":"Upgrade `rc-slider` to version `11.1.7` or newer to resolve `useLayoutEffect` related warnings.","message":"Versions prior to `v11.1.7` might encounter `useLayoutEffect` warnings during server-side rendering (SSR) or in specific React concurrent mode setups.","severity":"gotcha","affected_versions":"<11.1.7"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add `import 'rc-slider/assets/index.css';` to your application's entry point or the component file where `rc-slider` is used.","cause":"The required CSS file for `rc-slider` styling is missing from your project's imports.","error":"Failed to compile. Module not found: Error: Can't resolve 'rc-slider/assets/index.css'"},{"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.","cause":"The `tipFormatter` prop received an `undefined` value, leading to a runtime error when trying to format a non-existent value.","error":"TypeError: Cannot read properties of undefined (reading 'tipFormatter')"},{"fix":"This was a bug fixed in `rc-slider@11.1.9`. Upgrade to `v11.1.9` or later to resolve this specific error.","cause":"An internal or custom `onDelete` function was expected but not found or was incorrectly called.","error":"TypeError: onDelete is not a function"},{"fix":"Upgrade `rc-slider` to version `11.1.7` or newer, which contains a fix for this `useLayoutEffect` warning.","cause":"Older versions of `rc-slider` used `useLayoutEffect` in a way that caused warnings during server-side rendering (SSR) environments.","error":"Warning: useLayoutEffect does nothing in Node. Consider using useEffect instead."}],"ecosystem":"npm"}