77 lines
1.8 KiB
JavaScript
77 lines
1.8 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import styled from 'styled-components';
|
|
import InputRange from './react-input-range';
|
|
import remcalc from 'remcalc';
|
|
|
|
import FormLabel from '../form/label';
|
|
|
|
const Label = styled(FormLabel)`
|
|
margin-bottom: ${remcalc(10)};
|
|
margin-top: ${remcalc(12)};
|
|
`;
|
|
|
|
class Slider extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
minValue: this.props.minValue,
|
|
maxValue: this.props.maxValue,
|
|
value: this.props.value
|
|
};
|
|
|
|
this.changeValue = this.changeValue.bind(this);
|
|
}
|
|
|
|
changeValue(value) {
|
|
this.setState({ value }, () => this.props.onChange(value));
|
|
}
|
|
|
|
render() {
|
|
const { minValue, maxValue, value } = this.state;
|
|
const { children, ...rest } = this.props;
|
|
return (
|
|
<div>
|
|
<Label>{children}</Label>
|
|
<InputRange
|
|
{...rest}
|
|
minValue={minValue}
|
|
maxValue={maxValue}
|
|
value={value}
|
|
onChange={value => this.changeValue(value)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Slider.propTypes = {
|
|
minValue: PropTypes.number,
|
|
maxValue: PropTypes.number,
|
|
step: PropTypes.number,
|
|
value: PropTypes.oneOfType([PropTypes.number, PropTypes.shape()]),
|
|
onChangeComplete: PropTypes.func,
|
|
onChange: PropTypes.func,
|
|
formatLabel: PropTypes.func,
|
|
ariaLabelledby: PropTypes.string,
|
|
ariaControls: PropTypes.string,
|
|
disabled: PropTypes.bool,
|
|
draggableTrack: PropTypes.bool,
|
|
onChangeStart: PropTypes.func,
|
|
children: PropTypes.node
|
|
};
|
|
|
|
Slider.defaultProps = {
|
|
onChangeComplete: () => {},
|
|
onChange: () => {},
|
|
formatLabel: value =>
|
|
(value.toString().split('.')[1] || []).length > 3
|
|
? Math.round(value).toFixed(3)
|
|
: value,
|
|
onChangeStart: () => {},
|
|
step: 1
|
|
};
|
|
|
|
export default Slider;
|