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

CSS agnostic slider component for React.

Important Note

This is alpha release. Use with caution and hope.

Installation

npm install react-slider

Overview

var Handle = React,createClass({
  render: function() {
    return <div className="handle">{this.props.sliderValue}</div>;
  }
});

var slider = (
  <ReactSlider className="slider">
    <Handle />
  </ReactSlider>
);

React.renderComponent(slider, document.body);

Outputs following html:

<div class="slider">
  <div style="/* some weird stuff */">
    <!-- yes, this is your handle component -->
    <div className="handle">0</div>
</div>

Now you can style it as you want. Checkout the examples directory to see how.

Properties

minValue {number} default: 0

The minimum value of the slider.

maxValue {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. maxValue - minValue should be evenly divisible by the step value.

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.

onChange {function}

Callback called on every value change. Example:

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

valuePropName {string} default: 'sliderValue'

Name of property which is passed to children component and contains current slider value.