{"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,"search_vec":"'0.14':63 '15':65 '16':71 '2.2.0':27 '3kb':79 'act':9 'api':39 'bundl':77 'callback':41 'chang':43 'compat':74 'complet':46 'compon':7,34 'current':23 'default':35 'depend':60 'direct':56 'distinguish':81 'drop':13 'drop-in':12 'element':22 'format':52 'gzip':80 'heavier':84 'horizontal/vertical':49 'html5':18 'includ':40 'input':19,99 'issu':75 'javascript':91 'label':53 'lead':72 'librari':29,86 'lightweight':5 'like':87 'minim':76 'orient':50 'peer':59 'rang':20,94,100 'range-slid':93 'rangeslid':3,92,98 'rc':89 'rc-slider':88 'react':2,6,62,70,97,101 'react-rangeslid':1,96 'replac':15 'revers':55 'ship':30 'singl':33 'size':78 'slider':21,85,90,95,102 'stabl':24 'start':44 'style':36 'support':48,69 'tooltip':51 'use':58 'version':25","created_at":"2026-05-01T13:48:32.567383+00:00","updated_at":"2026-05-01T13:48:32.567383+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/whoisandy/react-rangeslider","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-rangeslider","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-01","next_check":"2026-07-30","install_tag":null}}