import React from 'react';
export default class Slider extends React.Component {
static defaultProps = {
axis: false,
min: 0,
max: 1
};
static PropTypes = {
axis: React.PropTypes.bool,
axisUnit: React.PropTypes.string,
min: React.PropTypes.number,
max: React.PropTypes.number,
onChange: React.PropTypes.func.isRequired,
};
constructor(props) {
super(props);
this.down = this.down.bind(this);
this.up = this.up.bind(this);
}
down(e) {
let rect = e.currentTarget.getBoundingClientRect();
this.move = this.updatePercent.bind(this, rect.left, rect.width);
this.move(e);
document.addEventListener("mousemove", this.move);
document.addEventListener("mouseup", this.up);
}
up() {
document.removeEventListener("mousemove", this.move);
document.removeEventListener("mouseup", this.up);
}
componentWillUnmount(){
this.up();
}
updatePercent(left, width, event) {
this.props.onChange(Math.min(Math.max((event.clientX - left) / width, 0), 1));
}
render() {
let pctStr = (this.props.percent * 100) + '%';
let { axis, axisUnit, min, max } = this.props;
let axisGroup;
if (axis) {
axisGroup =
{min + axisUnit}
{(min + max / 2) + axisUnit}
{max + axisUnit}
;
}
return ;
}
}