将Date（）与MaterialUI Slider组件集成

Question

这就是我要做的事情。

MaterialUI有一个可以与整数一起使用的Slider组件。我的理解是它不允许小数或时间格式，除非它以这种方式编程或以某种方式操纵。

普通滑块看起来像这样

这是通过传递这些值

来完成的

<Slider
    min={0}
    max={200}
    step={15}
    value={this.state.fromSlider}
    onChange={this.handleFromSlider}/>

其余代码位于他们的文档here中。

我想要完成的是概念上的简单，我想用它来选择（00:00和23:59）之间的时间以便它看起来像这样

到目前为止，这是我的代码。

import React from 'react';
import { Row, Col } from 'react-flexbox-grid';
import Slider from 'material-ui/Slider';

class PlayerNetwork extends React.Component {

    constructor(props) {
        super(props);
        const min = new Date();
        const max = new Date();
        min.setHours(0, 0, 0, 0);
        max.setHours(0, 0, 0, 0);
        this.state = {
            min: min,
            max: max,
        };
    }
    state = {
        fromSlider: 0.5,
    };

    handleFromSlider = (event, value) => {
        this.setState({fromSlider: value});
    };

    handleChangeMin = (event, date) => {
        this.setState({
            min: date,
        });
    };

    handleChangeMax = (event, date) => {
        this.setState({
            max: date,
        });
    };

    render() {
        const { min, max } = this.state;
        return (
            <div>
                <Row>
                    <Col xs={4}>
                        <div>From:</div>
                        <div>{this.state.fromSlider}</div>
                    </Col>
                    <Col xs={8}>
                        <Slider
                            min={min}
                            max={max}
                            step={15}
                            value={this.state.fromSlider}
                            onChange={this.handleFromSlider}/>
                    </Col>
                </Row>
            </div>
        );
    }
}

module.exports = (PlayerNetwork);