{"id":26166,"library":"react-rangeslider","title":"react-rangeslider","description":"A lightweight React component that acts as a drop-in replacement for the HTML5 input range slider element. Current stable version is 2.2.0. The library ships with a single component, default styles, and an API including callbacks for change start and complete. It supports horizontal/vertical orientation, tooltips, formatted labels, and reverse direction. It uses peer dependencies for React 0.14 or 15, but does not support React 16+ leading to compatibility issues. Minimal bundle size (~3KB gzipped) distinguishes it from heavier slider libraries like rc-slider.","status":"maintenance","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/whoisandy/react-rangeslider","tags":["javascript","rangeslider","range-slider","react-rangeslider","input","range","react","slider"],"install":[{"cmd":"npm install react-rangeslider","lang":"bash","label":"npm"},{"cmd":"yarn add react-rangeslider","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-rangeslider","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency: requires React ^0.14.0 || ^15.0.0","package":"react","optional":false}],"imports":[{"note":"Default export, not named.","wrong":"import { Slider } from 'react-rangeslider'","symbol":"Slider","correct":"import Slider from 'react-rangeslider'"},{"note":"Path for default styles is lib/index.css, not in a styles folder.","wrong":"import 'react-rangeslider/styles.css'","symbol":"CSS","correct":"import 'react-rangeslider/lib/index.css'"},{"note":"require returns the default export directly, not an object.","wrong":"const { Slider } = require('react-rangeslider')","symbol":"CommonJS require","correct":"const Slider = require('react-rangeslider')"}],"quickstart":{"code":"import React, { Component } from 'react';\nimport Slider from 'react-rangeslider';\nimport 'react-rangeslider/lib/index.css';\n\nclass VolumeSlider extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { volume: 0 };\n  }\n\n  handleOnChange = (value) => {\n    this.setState({ volume: value });\n  };\n\n  render() {\n    const { volume } = this.state;\n    return (\n      <Slider\n        value={volume}\n        orientation=\"vertical\"\n        onChange={this.handleOnChange}\n      />\n    );\n  }\n}\n\nexport default VolumeSlider;","lang":"javascript","description":"Basic usage with state and onChange handler for a vertical volume slider."},"warnings":[{"fix":"Use a different slider library that supports React 16+, or downgrade React to 15.","message":"Peer dependency on React ^0.14.0 || ^15.0.0 — incompatible with React 16+.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add import 'react-rangeslider/lib/index.css' to your entry file.","message":"Default styles must be imported separately; component does not load them automatically.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Use strict mode at your own risk or migrate to a maintained library.","message":"Component uses deprecated React lifecycle methods (componentWillReceiveProps) internally.","severity":"deprecated","affected_versions":">=2.2.0"},{"fix":"Access via window.ReactRangeslider in browser script contexts.","message":"UMD bundle exposes library as window.ReactRangeslider, not window.Slider.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Verify your import path: import 'react-rangeslider/lib/index.css' or use a copy of the CSS file.","cause":"CSS file path is incorrect or not copied to node_modules.","error":"Cannot find module 'react-rangeslider/lib/index.css'"},{"fix":"Update to a version of react-rangeslider that uses React.createElement directly, or fork and fix.","cause":"Internal use of React.createFactory in older React versions.","error":"Warning: React.createFactory() is deprecated and will be removed in a future major release."},{"fix":"Use a different slider like rc-slider or react-slider that supports React 16+.","cause":"Package peer dependency restricts to React 0.14-15.","error":"Slider is not rendering in React 16 project"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}