React Slider Component

2.0.6 · active · verified Sun Apr 19

react-slider is an actively maintained React component designed for creating highly customizable range sliders. The current stable version is 2.0.6, with recent updates focusing on stability and compatibility across modern web environments. It supports both single and multiple handles, offers horizontal and vertical orientations, and includes accessibility features through props like `ariaLabel` and `ariaValuetext`. Key differentiators include built-in `ResizeObserver` support for dynamic slider resizing and a commitment to broad React compatibility, explicitly listing React 16, 17, and 18 as peer dependencies. The project demonstrates a consistent release cadence, regularly publishing patch updates for bug fixes and minor enhancements, with major versions introducing significant features and occasional breaking changes. It addresses common slider challenges such as mobile 'snap back' behavior and module resolution issues for modern JavaScript module systems.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates both single-handle and dual-handle (range) sliders with custom thumb and track rendering. It shows how to manage slider state using React hooks and includes basic inline styles for clarity and immediate visual feedback.

import React from 'react';
import ReactDOM from 'react-dom/client';
import Slider from 'react-slider';

// Basic inline styles for demonstration. In a real app, use CSS classes.
const thumbStyle = {
  height: '25px',
  width: '25px',
  backgroundColor: '#555',
  borderRadius: '50%',
  cursor: 'grab',
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  color: '#fff',
  fontSize: '0.8em'
};

const trackStyle = (state, props) => ({
  top: '0',
  bottom: '0',
  background: props.index === 1 ? '#ddd' : '#007bff',
  borderRadius: '5px'
});

const sliderContainerStyle = {
  width: '80%',
  margin: '50px auto',
  height: '25px',
  background: '#eee',
  borderRadius: '5px',
  display: 'flex',
  alignItems: 'center',
};

function App() {
  const [value, setValue] = React.useState(50);
  const [rangeValues, setRangeValues] = React.useState([25, 75]);

  return (
    <div style={{ fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>React Slider Examples</h1>

      <h2>Single Handle Slider</h2>
      <div style={sliderContainerStyle}>
        <Slider
          value={value}
          onChange={setValue}
          renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />}
          renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>}
          min={0}
          max={100}
          step={1}
          ariaLabel="Single value slider"
        />
      </div>
      <p>Current Value: {value}</p>

      <h2>Range Slider</h2>
      <div style={sliderContainerStyle}>
        <Slider
          value={rangeValues}
          onChange={setRangeValues}
          renderTrack={(props, state) => <div {...props} style={trackStyle(state, props)} />}
          renderThumb={(props, state) => <div {...props} style={thumbStyle}>{state.valueNow}</div>}
          min={0}
          max={100}
          step={1}
          ariaLabel={['Min value slider', 'Max value slider']}
          pearling
          minDistance={10}
        />
      </div>
      <p>Current Range: [{rangeValues[0]}, {rangeValues[1]}]</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root') ?? document.createElement('div'));
root.render(<App />);

view raw JSON →