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

CSS agnostic slider component for React.

See demo: https://mpowaga.github.io/react-slider/

Important Note

This is an alpha release. Use with caution and hope.

Installation

npm install react-slider

Overview

Single slider:

Similar to <input type="range" defaultValue={50} />

React.render(<ReactSlider defaultValue={50} />, document.body);

Double slider (with bars between the handles):

React.render(<ReactSlider defaultValue={[0, 100]} withBars />, document.body);

Multi slider:

React.render(<ReactSlider defaultValue={[0, 33, 67, 100]} withBars />, document.body);

Provide custom handles:

React.render(
  <ReactSlider withBars>
    <div className="my-handle">1</div>
    <div className="my-handle">2</div>
    <div className="my-handle">3</div>
  </ReactSlider>,
  document.body
);

Now you can style it as you want. Checkout the index.html example to see how.

Properties

min {number} default: 0

The minimum value of the slider.

max {number} default: 100

The maximum value of the slider.

step {number} default: 1

Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value.

minDistance {number} default: 0

The minimal distance between any pair of handles. Zero means they can sit on top of each other.

defaultValue {oneOfType([number, arrayOf(number)])} default: 0

Determines the initial positions of the handles and the number of handles if the component has no children.

If a number is passed a slider with one handle will be rendered. If an array is passed each value will determine the position of one handle. The values in the array must be sorted. If the component has children, the length of the array must match the number of children.

value {oneOfType([number, arrayOf(number)])} default: 0

Like defaultValue but for controlled components.

orientation {oneOf(['horizontal', 'vertical'])} default: 'horizontal'

Determines whether the slider moves horizontally (from left to right) or vertically (from top to bottom).

className {string} default: 'slider'

The css class set on the slider node.

handleClassName {string} default: 'handle'

The css class set on each handle node. In addition each handle will receive a numbered css class of the form ${handleClassName}-${i}, e.g. handle-0, handle-1, ...

handleActiveClassName {string} default: 'active'

The css class set on the handle that is currently being moved.

withBars {boolean} default: false

If true bars between the handles will be rendered.

barClassName {string} default: 'bar'

The css class set on the bars between the handles. In addition bar fragment will receive a numbered css class of the form ${barClassName}-${i}, e.g. bar-0, bar-1, ...

pearling {bool} default: false

If true the active handle will push other handles within the constraints of min, max, step and minDistance.

disabled {bool} default: false

If true the handles can't be moved.

snapDragDisabled {bool} default: false

Disables handle move when clicking the slider bar.

invert {bool} default: false

Inverts the slider.

onBeforeChange {func}

Callback called before starting to move a handle.

onChange {func}

Callback called on every value change.

onAfterChange {func}

Callback called only after moving a handle has ended or when a new value is set by clicking on the slider.

onSliderClick {func}

Callback called when the the slider is clicked (handle or bars). Receives the value at the clicked position as argument.

ariaLabel {oneOfType([string, arrayOf(string)])}

aria-label for screen-readers to apply to the handles. Use an array for more than one handle. The length of the array must match the number of handles in the value array.

ariaValuetext {string}

aria-valuetext for screen-readers

Methods

getValue

Returns the current value of the slider, which is a number in the case of a single slider, or an array of numbers in case of a multi slider.

License

See the License file.