1.4.0 • Published 5 years ago
react-multi-bar-slider v1.4.0
react-multi-bar-slider
Slider component with multiple bars for React.
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).