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 (
this.changeValue(value)} />
); } } 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;