{"id":26165,"library":"react-range-slider1","title":"react-rangeslider","description":"A fast and lightweight React component that serves as a drop-in replacement for the HTML5 input range slider element. The package is currently at version 2.5.8, with a stable API focused on simplicity and performance. It provides a declarative slider with customizable orientation (horizontal/vertical), min/max values, step size, tooltip display, labels, and callbacks for value changes. The package includes default CSS styles and supports both controlled and uncontrolled usage. Compared to alternatives, it emphasizes minimal bundle size, no external dependencies aside from React, and a straightforward API. The project appears to be in maintenance mode with no recent updates, and peer dependencies are limited to React 0.14.x or 15.x, which may cause compatibility issues with newer React versions.","status":"maintenance","version":"2.5.8","language":"javascript","source_language":"en","source_url":"https://github.com/Devansh-Sanghvi/react-rangeslider","tags":["javascript","rangeslider","range-slider","react-rangeslider","input","range","react","slider"],"install":[{"cmd":"npm install react-range-slider1","lang":"bash","label":"npm"},{"cmd":"yarn add react-range-slider1","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-range-slider1","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency required for the component to work","package":"react","optional":false}],"imports":[{"note":"The library uses a default export. Named import will result in undefined.","wrong":"import { Slider } from 'react-rangeslider'","symbol":"Slider","correct":"import Slider from 'react-rangeslider'"},{"note":"For CommonJS, require the module directly; it returns the default export.","wrong":"var Slider = require('react-rangeslider').Slider","symbol":"Slider","correct":"var Slider = require('react-rangeslider')"},{"note":"The CSS is a side-effect import; do not assign it to a variable.","wrong":"import styles from 'react-rangeslider/lib/index.css'","symbol":"styles","correct":"import 'react-rangeslider/lib/index.css'"}],"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":"Shows a basic controlled vertical slider component using react-rangeslider, including state management and onChange handler."},"warnings":[{"fix":"Use a compatible React version (15.x) or consider a modern alternative library.","message":"React peer dependency is limited to 0.14.x or 15.x. May not work with React 16+ or newer.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Pass new values via key prop to remount or use an alternative library that supports dynamic updates.","message":"The slider does not support controlled props like min, max, step updates after initial render; values are only read on mount.","severity":"gotcha","affected_versions":"all"},{"fix":"Consider using a more modern slider library with touch support.","message":"The component does not handle touch events properly on some mobile browsers, leading to sticky slider behavior.","severity":"gotcha","affected_versions":"all"},{"fix":"Use a maintained fork or alternative library.","message":"The UMD build is located at unpkg, but the library may not be actively maintained.","severity":"deprecated","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run 'npm install react-rangeslider --save' and ensure import is 'import Slider from 'react-rangeslider''.","cause":"The package is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'react-rangeslider'"},{"fix":"Change to 'import Slider from 'react-rangeslider'' (no curly braces).","cause":"Using a named import instead of default import for the Slider component.","error":"Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined."},{"fix":"Use 'import 'react-rangeslider/lib/index.css'' without assignment.","cause":"Importing the CSS as a module (e.g., import styles from '...') which is not how the CSS is exported.","error":"Cannot read property 'prototype' of undefined"},{"fix":"Ensure value is a number: value={parseInt(value, 10)} or value={Number(value)}.","cause":"Passing a string to the value prop instead of a number.","error":"Invalid prop `value` of type `string` supplied to `Slider`, expected `number`."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}