反应滑块组件

Question

我试图弄清楚如何实施像react-rangeslider这样的组件，但却面临一些启动挑战。

我尝试create-react-app并摆弄App组件。我到目前为止：

import React, { Component } from 'react';
import './App.css';

import Slider from 'react-rangeslider';

class App extends Component {

  constructor() {
    super();
    this.state = {
      speed: 4
    };
  }

  componentDidMount() {
    this.setState({
      speed: 3
    });
  }

  render() {
    return (
      <div className="App">
        <h2>{this.state.speed}</h2>
        <p>The page did render..</p>

        <Slider
          min={1}
          max={4}
          step={1}
          value={this.state.speed}
          onChange={(newVal) => {
            console.log('Sliding..');
            this.setState({
              speed: newVal
            });
            }
          }
        />
      </div>
    );
  }
}

export default App;

但页面上没有滑块显示...只有标题和段落..

更新

这就是React Inspection的样子：

Answer 1

除了我的评论，请尝试将此css添加到您的网页：

.rangeslider{margin:20px 0;position:relative;background:#e6e6e6}.rangeslider .rangeslider__fill,.rangeslider .rangeslider__handle{position:absolute}.rangeslider,.rangeslider .rangeslider__fill{display:block;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}.rangeslider .rangeslider__handle{background:#fff;border:1px solid #ccc;cursor:pointer;display:inline-block;position:absolute}.rangeslider .rangeslider__handle:active{background:#999}.rangeslider-horizontal{height:20px;border-radius:10px}.rangeslider-horizontal .rangeslider__fill{height:100%;background:#27ae60;border-radius:10px;top:0}.rangeslider-horizontal .rangeslider__handle{width:40px;height:40px;border-radius:40px;top:-10px}.rangeslider-vertical{margin:20px auto;height:150px;max-width:10px;background:none}.rangeslider-vertical .rangeslider__fill{width:100%;background:#27ae60;box-shadow:none;bottom:0}.rangeslider-vertical .rangeslider__handle{width:30px;height:10px;left:-10px}.rangeslider-vertical .rangeslider__handle:active{box-shadow:none}@media screen and (min-width:1200px){#mount{width:600px}}

我已经从演示页面复制了样式，所以它们都被最小化了。

github repo上的示例目录中有一个完整的文件。