react-slider

What is react-slider?

The react-slider package is a flexible and customizable slider component for React applications. It allows developers to create sliders with various configurations and styles, making it suitable for a wide range of use cases such as range selection, volume control, and more.

What are react-slider's main functionalities?

Basic Slider

This code demonstrates a basic slider with a default value of 50. It is a simple implementation to get started with react-slider.

import React from 'react';
import Slider from 'react-slider';

const BasicSlider = () => (
  <Slider defaultValue={50} />
);

export default BasicSlider;

Range Slider

This code demonstrates a range slider with default values set to 20 and 80. It allows users to select a range within the slider.

import React from 'react';
import Slider from 'react-slider';

const RangeSlider = () => (
  <Slider defaultValue={[20, 80]} />
);

export default RangeSlider;

Custom Thumb and Track

This code demonstrates a slider with custom thumb and track components. The thumb displays the current value, and the track is styled differently based on its position.

import React from 'react';
import Slider from 'react-slider';
import './customSlider.css';

const CustomSlider = () => (
  <Slider
    defaultValue={50}
    renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
    renderTrack={(props, state) => <div {...props} className={state.index === 0 ? 'track-left' : 'track-right'} />}
  />
);

export default CustomSlider;

Other packages similar to react-slider

rc-slider

rc-slider is a React slider component with similar functionalities to react-slider. It offers a range of features including range selection, custom styling, and more. Compared to react-slider, rc-slider provides more built-in features and customization options out of the box.

react-input-range

react-input-range is another React component for creating sliders. It focuses on providing a simple API for creating range sliders with custom styling. While it is similar to react-slider, react-input-range is more specialized in handling range inputs and offers a more straightforward API for this purpose.

react-range

react-range is a lightweight and flexible slider component for React. It provides a highly customizable slider with support for range selection and custom styling. Compared to react-slider, react-range is more lightweight and offers a more flexible approach to customization.

README

React Slider

Accessible, CSS agnostic, slider component for React.

Installation

npm install react-slider

API Documentation

For component props, methods, and living examples, see the demo:

https://zillow.github.io/react-slider/

TypeScript Support

npm install --save-dev @types/react-slider

License

See the License file.

Changelog

1.1.1 (2020-11-03)

Bug Fixes

• onChange now returns the correct value when used as a controlled component (b0aef7f), closes #197

Code Refactoring

• UNSAFE_componentWillReceiveProps replaced in favor of getDerivedStateFromProps (5fff681), closes #193