{"id":11862,"library":"react-slider","title":"React Slider Component","description":"react-slider is an actively maintained React component designed for creating highly customizable range sliders. The current stable version is 2.0.6, with recent updates focusing on stability and compatibility across modern web environments. It supports both single and multiple handles, offers horizontal and vertical orientations, and includes accessibility features through props like `ariaLabel` and `ariaValuetext`. Key differentiators include built-in `ResizeObserver` support for dynamic slider resizing and a commitment to broad React compatibility, explicitly listing React 16, 17, and 18 as peer dependencies. The project demonstrates a consistent release cadence, regularly publishing patch updates for bug fixes and minor enhancements, with major versions introducing significant features and occasional breaking changes. It addresses common slider challenges such as mobile 'snap back' behavior and module resolution issues for modern JavaScript module systems.","status":"active","version":"2.0.6","language":"javascript","source_language":"en","source_url":"https://github.com/zillow/react-slider","tags":["javascript","react-component","react","slider","component"],"install":[{"cmd":"npm install react-slider","lang":"bash","label":"npm"},{"cmd":"yarn add react-slider","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-slider","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering the component. Requires React 16, 17, or 18.","package":"react","optional":false}],"imports":[{"note":"The primary `Slider` component is exported as the default export of the package. Using a named import will result in runtime errors.","wrong":"import { Slider } from 'react-slider';","symbol":"Slider","correct":"import Slider from 'react-slider';"},{"note":"For CommonJS environments, typical in Node.js applications or older bundler configurations. This correctly imports the default export.","symbol":"Slider (CommonJS)","correct":"const Slider = require('react-slider');"},{"note":"While the `react-slider` package generally infers types well, you may explicitly import `SliderProps` for type-checking when extending or deeply configuring the component.","symbol":"TypeScript Type Definitions","correct":"import Slider from 'react-slider';\nimport type { SliderProps } from 'react-slider';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Slider from 'react-slider';\n\n// Basic inline styles for demonstration. In a real app, use CSS classes.\nconst thumbStyle = {\n  height: '25px',\n  width: '25px',\n  backgroundColor: '#555',\n  borderRadius: '50%',\n  cursor: 'grab',\n  display: 'flex',\n  justifyContent: 'center',\n  alignItems: 'center',\n  color: '#fff',\n  fontSize: '0.8em'\n};\n\nconst trackStyle = (state, props) => ({\n  top: '0',\n  bottom: '0',\n  background: props.index === 1 ? '#ddd' : '#007bff',\n  borderRadius: '5px'\n});\n\nconst sliderContainerStyle = {\n  width: '80%',\n  margin: '50px auto',\n  height: '25px',\n  background: '#eee',\n  borderRadius: '5px',\n  display: 'flex',\n  alignItems: 'center',\n};\n\nfunction App() {\n  const [value, setValue] = React.useState(50);\n  const [rangeValues, setRangeValues] = React.useState([25, 75]);\n\n  return (\n    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>\n      <h1>React Slider Examples</h1>\n\n      <h2>Single Handle Slider</h2>\n      <div style={sliderContainerStyle}>\n        <Slider\n          value={value}\n          onChange={setValue}\n          renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />}\n          renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>}\n          min={0}\n          max={100}\n          step={1}\n          ariaLabel=\"Single value slider\"\n        />\n      </div>\n      <p>Current Value: {value}</p>\n\n      <h2>Range Slider</h2>\n      <div style={sliderContainerStyle}>\n        <Slider\n          value={rangeValues}\n          onChange={setRangeValues}\n          renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />}\n          renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>}\n          min={0}\n          max={100}\n          step={1}\n          ariaLabel={['Min value slider', 'Max value slider']}\n          pearling\n          minDistance={10}\n        />\n      </div>\n      <p>Current Range: [{rangeValues[0]}, {rangeValues[1]}]</p>\n    </div>\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div'));\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates both single-handle and dual-handle (range) sliders with custom thumb and track rendering. It shows how to manage slider state using React hooks and includes basic inline styles for clarity and immediate visual feedback."},"warnings":[{"fix":"Review your project's build pipeline and development environment configurations. If encountering issues after upgrading to v2.x, consult the `react-slider` changelog or GitHub issues for potential migration guidance related to build tooling.","message":"Version 2.0.0 introduced a breaking change related to updating `create-react-styleguide` to v8.x. While primarily an internal build system dependency, this might affect custom development setups or build processes that rely on specific versions or outputs from the internal style guide tooling.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your project's build configuration (Webpack, Rollup, Vite) and `tsconfig.json` (for TypeScript) are correctly set up to handle ESM and dual package resolutions. Consider `\"type\": \"module\"` in your `package.json` for ESM projects or `\"moduleResolution\": \"bundler\"` in TypeScript 5+ for improved compatibility. Upgrade your bundler and Node.js versions if issues persist.","message":"`react-slider` versions 2.0.0 onwards leverage dual package extensions, which can sometimes lead to module resolution issues in older tooling or mixed CommonJS/ESM projects. Early v2.x patch releases specifically addressed 'module resolution' and 'dual package extensions' bugs.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade to `react-slider@2.0.5` or a later version to ensure this specific mobile interaction bug is resolved and benefit from improved touch handling.","message":"Prior to v2.0.5, users reported a 'snap back' issue where slider handles on mobile devices would occasionally revert to a previous position during interaction, creating a frustrating user experience.","severity":"gotcha","affected_versions":"<2.0.5"},{"fix":"Upgrade `react-slider` to version `0.11.2` or higher to ensure compatibility with modern React ref syntax and prevent the `NaN` value bug.","message":"Older versions (pre-v0.11.2) had known issues with React ref compatibility for React 16+ and a bug where the slider value could incorrectly become `NaN`. These issues can lead to unexpected behavior or runtime errors.","severity":"gotcha","affected_versions":"<0.11.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"If you are specifically on `react-slider@0.11.2`, downgrade to `0.11.1` or upgrade to `0.11.3` (or higher) which reverted the problematic arrow functions to ES5 syntax for broader compatibility.","cause":"This error specifically occurred in `react-slider@0.11.2` after a brief introduction of arrow functions that broke some older build environments or transpilation setups.","error":"TypeError: Cannot read properties of undefined (reading 'call')"},{"fix":"Change your import statement from `import { Slider } from 'react-slider';` to the correct default import: `import Slider from 'react-slider';`","cause":"This common React error indicates that you are likely attempting to import `Slider` as a named export, but `react-slider` provides it as a default export.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)...Check the render method of `App`."},{"fix":"Ensure that all value-related props (`min`, `max`, `value`, `defaultValue`) are explicitly numeric types. Use `parseInt()`, `parseFloat()`, or the unary plus operator (`+`) to convert string inputs to numbers.","cause":"The `min`, `max`, `value`, or `defaultValue` props passed to the `Slider` component are not strictly numbers. This often happens if values are read from inputs as strings or are `undefined`.","error":"Invariant Violation: Min and Max values for `react-slider` must be numbers."},{"fix":"Verify your bundler (Webpack, Rollup, Vite) configuration correctly handles ESM/CJS interoperability. For TypeScript, ensure `tsconfig.json` has `\"moduleResolution\": \"bundler\"` (TypeScript 5+) or `\"node\"`/`\"nodenext\"` (for older TS). Clear your `node_modules` and `package-lock.json`/`yarn.lock` and reinstall dependencies.","cause":"These errors typically point to module resolution issues, especially in `react-slider` v2.x due to its dual package extensions and how bundlers resolve ESM vs CommonJS paths.","error":"Module not found: Can't resolve 'react-slider' in '...' OR Failed to compile: Can't resolve 'react-slider/dist/...' for CommonJS"}],"ecosystem":"npm"}