react-multi-bar-slider

Slider component with multiple bars for React.

Demo repo

Install

yarn add react-multi-bar-slider or npm install --save react-multi-bar-slider

Usage

See the demo repo.

Basic example

import MultiSlider, { Progress } from 'react-multi-bar-slider';

export default class App extends Component {
  state = {
    progress: 10
  };

  handleSlide = newProgress => this.setState({ progress: newProgress });

  render() {
    return (
      <MultiSlider onSlide={this.handleSlide}>
        <Progress color="green" progress={this.state.progress} />
        <Progress color="purple" progress={45} />
      </MultiSlider>
    );
  }
}

Advanced example

import MultiSlider, { Progress, Dot } from 'react-multi-bar-slider';

export default class App extends Component {
  state = {
    progress: 10
  };

  handleSlide = newProgress => this.setState({ progress: newProgress });

  render() {
    return (
      <MultiSlider
        width={600}
        height={20}
        slidableZoneSize={40}
        backgroundColor="bisque"
        equalColor="blue"
        style={{ marginBottom: 40 }}
        onSlide={this.handleSlide}
        onDragStart={progress => console.log(`Started dragging: ${progress}%`)}
        onDragStop={progress => console.log(`Stopped dragging: ${progress}%`)}
        roundedCorners
        reversed
      />
        <Progress color="green" progress={this.state.progress}>
          <Dot color="grey" />
        </Progress>
        <Progress color="purple" progress={45}>
          <Dot color="grey" />
        </Progress>
      </MultiSlider>
    );
  }
}

Props

* = Required

MultiSlider

Prop	Description	Type	Default
width	Width of the slider	number or string	100%
height	Height of the slider	number or string	14px
slidableZoneSize	Size of the zone in which sliders can be dragged	number or string	7px,
backgroundColor	Background color of the slider	string	#EEEEEE
equalColor	Color of all bars when their values are equal	string
style	Custom style for the slider Signature: function(props: object) => object	object or function	{}
onSlide	Callback that is fired when the progress was set Signature: function(progress: number) => void	function
onDragStart	Callback function that is fired when the slider has begun to move Signature: function(progress: number) => void	function
onDragStop	Callback function that is fired when the slide has stopped moving Signature: function(progress: number) => void	function
roundedCorners	When set to true, the slider has rounded corners	bool	false
reversed	When set to true, the slider is reversed	bool	false
readOnly	When set to true, the slider can't be updated	bool	false
children*	The progress bars that are shown in the slider (or any other children)	node

All other props (not documented here) will be passed on to the root element.

Progress

Prop	Description	Type	Default
color*	Color of the progress bar	string
progress*	Progress of the progress bar	number
style	Custom style for the progress bar Signature: function(props: object) => object	object or function
children	The slider dot (or any other children)	node

All other props (not documented here) will be passed on to the root element.

Dot

Prop	Description	Type	Default
width	Width of the dot	number or string	50 when the dot has an icon, 28 if not
height	Height of the dot	number or string	50 when the dot has an icon, 28 if not
color	Color of the dot	string
icon	URL of the image to use as dot icon	string
style	Custom style for the dot Signature: function(props: object) => object	object or function
iconStyle	Custom style for the dot icon Signature: function(props: object) => object	object or function
children	Children of the dot	node

All other props (not documented here) will be passed on to the root element.

How custom styles work

When a function is passed to a style prop rather than an object, it is expected to return an object. The style function will be called with all props that that component has (except for the style and children props and any internal callbacks). The return value of the function will be used as style (see the demo repo for an example).