React Slider Component

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; 

но не слайдер appeas на странице ... только заголовок и пункт ..

Update

Это то, что 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 имеется файл с полным количеством файлов.