react-rangeslider

2.5.8 verified Fri May 01 auth: no javascript maintenance

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.

Common errors

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

cause 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''.

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

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

fix

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

error Cannot read property 'prototype' of undefined ↓

cause 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.

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

cause 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)}.

Warnings

breaking React 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.

gotcha The 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.

gotcha The 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.

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

fix Use a maintained fork or alternative library.

Install

npm install react-range-slider1

yarn add react-range-slider1

pnpm add react-range-slider1

Imports

Slider
wrong
```
import { Slider } from 'react-rangeslider'
```
correct
```
import Slider from 'react-rangeslider'
```
The library uses a default export. Named import will result in undefined.

Slider

wrong

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

correct

var Slider = require('react-rangeslider')

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

styles

wrong

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

correct

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

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

Quickstart

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;