Registry / web-framework / react-range-slider1

react-range-slider1

library2.5.8jsnpmunverified

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.

web-framework

npm install react-range-slider1

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-RANGE-SLIDER

react-range-slider1

web-frameworkjavascriptv2.5.8

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'

The library uses a default export. Named import will result in undefined.

Slider

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

✗ var Slider = require('react-rangeslider').Slider

For CommonJS, require the module directly; it returns the default export.

styles

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

✗ import styles from 'react-rangeslider/lib/index.css'

The CSS is a side-effect import; do not assign it to a variable.

Shows a basic controlled vertical slider component using react-rangeslider, including state management and onChange handler.

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

breakingReact peer dependency is limited to 0.14.x or 15.x. May not work with React 16+ or newer.

fix

Use a compatible React version (15.x) or consider a modern alternative library.

affects: >=2.0.0

gotchaThe slider does not support controlled props like min, max, step updates after initial render; values are only read on mount.

fix

Pass new values via key prop to remount or use an alternative library that supports dynamic updates.

affects: all

gotchaThe component does not handle touch events properly on some mobile browsers, leading to sticky slider behavior.

fix

Consider using a more modern slider library with touch support.

affects: all

deprecatedThe UMD build is located at unpkg, but the library may not be actively maintained.

fix

Use a maintained fork or alternative library.

affects: all

Errors

Common errors & fixes

Module not found: Can't resolve 'react-rangeslider'

The package is not installed or the import path is incorrect.

fix

Run 'npm install react-rangeslider --save' and ensure import is 'import Slider from 'react-rangeslider''.

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Using a named import instead of default import for the Slider component.

fix

Change to 'import Slider from 'react-rangeslider'' (no curly braces).

Cannot read property 'prototype' of undefined

Importing the CSS as a module (e.g., import styles from '...') which is not how the CSS is exported.

fix

Use 'import 'react-rangeslider/lib/index.css'' without assignment.

Invalid prop `value` of type `string` supplied to `Slider`, expected `number`.

Passing a string to the value prop instead of a number.

fix

Ensure value is a number: value={parseInt(value, 10)} or value={Number(value)}.

Upgrade

Version history

2.5.8latest on npm

Audit

Dependencies

reactrequiredpeer dependency required for the component to work

Agent activity

5 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Devansh-Sanghvi/react-rangeslider ↗

packagehttps://www.npmjs.com/package/react-range-slider1 ↗