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://cell303.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 examples directory 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.

defaultValue {number|array<number>} default: 0

Determines the initial positions of the handles. Also determines the number of handles.

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.

value {number|array<number>}

Like defaultValue but for controlled components.

orientation {string} default: 'horizontal'

Determines whether the slider moves horizontally (from left to right) or vertically (from top to bottom). Can be one of: horizontal, vertical.

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.

minDistance {number} default: 0

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

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

withBars {boolean} default: false

If true bars between the handles will be rendered.

pearling {boolean} default: false

If true the handles behave like pearls on a pearl necklace.

disabled {boolean} default: false

If true the handles can't be moved.

onChange {function}

Callback called on every value change. Example:

function onChange(value) {
  console.log('New slider value: ' + value);
}

onChanged {function}

Callback called only after dragging/touching has ended or when a new value is set by clicking on the slider.

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.