react-rangeslider

2.2.0 verified Fri May 01 auth: no javascript maintenance

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.

Common errors

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

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

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

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

error Slider is not rendering in React 16 project ↓

cause Package peer dependency restricts to React 0.14-15.

fix

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

Warnings

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

gotcha Default styles must be imported separately; component does not load them automatically. ↓

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

deprecated Component uses deprecated React lifecycle methods (componentWillReceiveProps) internally. ↓

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

gotcha UMD bundle exposes library as window.ReactRangeslider, not window.Slider. ↓

fix Access via window.ReactRangeslider in browser script contexts.

Install

npm install react-rangeslider

yarn add react-rangeslider

pnpm add react-rangeslider

Imports

Slider

wrong

import { Slider } from 'react-rangeslider'

correct

import Slider from 'react-rangeslider'

Default export, not named.

CSS
wrong
```
import 'react-rangeslider/styles.css'
```
correct
```
import 'react-rangeslider/lib/index.css'
```
Path for default styles is lib/index.css, not in a styles folder.

CommonJS require

wrong

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

correct

const Slider = require('react-rangeslider')

require returns the default export directly, not an object.

Quickstart

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;