Registry / web-framework / react-rangeslider

react-rangeslider

library2.2.0jsnpmunverified

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.

web-framework

npm install react-rangeslider

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-RANGESLIDER

react-rangeslider

web-frameworkjavascriptv2.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Slider

✓ import Slider from 'react-rangeslider'

✗ import { Slider } from 'react-rangeslider'

Default export, not named.

CSS

✓ import 'react-rangeslider/lib/index.css'

✗ import 'react-rangeslider/styles.css'

Path for default styles is lib/index.css, not in a styles folder.

CommonJS require

✓ const Slider = require('react-rangeslider')

✗ const { Slider } = require('react-rangeslider')

require returns the default export directly, not an object.

Basic usage with state and onChange handler for a vertical volume slider.

import React, { Component } from 'react'; import Slider from 'react-rangeslider'; import 'react-rangeslider/lib/index.css'; class VolumeSlider extends Component { constructor(props) { super(props); this.state = { volume: 0 }; } handleOnChange = (value) => { this.setState({ volume: value }); }; render() { const { volume } = this.state; return ( <Slider value={volume} orientation="vertical" onChange={this.handleOnChange} /> ); } } export default VolumeSlider;

Debug

Known issues

breakingPeer dependency on React ^0.14.0 || ^15.0.0 — incompatible with React 16+.

fix

Use a different slider library that supports React 16+, or downgrade React to 15.

affects: >=2.0.0

gotchaDefault styles must be imported separately; component does not load them automatically.

fix

Add import 'react-rangeslider/lib/index.css' to your entry file.

affects: >=2.0.0

deprecatedComponent uses deprecated React lifecycle methods (componentWillReceiveProps) internally.

fix

Use strict mode at your own risk or migrate to a maintained library.

affects: >=2.2.0

gotchaUMD bundle exposes library as window.ReactRangeslider, not window.Slider.

fix

Access via window.ReactRangeslider in browser script contexts.

affects: >=2.0.0

Errors

Common errors & fixes

Cannot find module 'react-rangeslider/lib/index.css'

CSS file path is incorrect or not copied to node_modules.

fix

Verify your import path: import 'react-rangeslider/lib/index.css' or use a copy of the CSS file.

Warning: React.createFactory() is deprecated and will be removed in a future major release.

Internal use of React.createFactory in older React versions.

fix

Update to a version of react-rangeslider that uses React.createElement directly, or fork and fix.

Slider is not rendering in React 16 project

Package peer dependency restricts to React 0.14-15.

fix

Use a different slider like rc-slider or react-slider that supports React 16+.

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

reactrequiredpeer dependency: requires React ^0.14.0 || ^15.0.0

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/whoisandy/react-rangeslider ↗

packagehttps://www.npmjs.com/package/react-rangeslider ↗