React Slider Component
<p>I'm trying to figure out how to implement a component like <a href="https://react.rocks/example/react-rangeslider" rel="nofollow">react-rangeslider</a> but having some start-up challenges.</p>

<p>I trying out <a href="https://github.com/facebookincubator/create-react-app" rel="nofollow">create-react-app</a> and fiddling inside the <code>App</code> component. I got this far:</p>

<pre><code>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 (
      &lt;div className="App"&gt;
        &lt;h2&gt;{this.state.speed}&lt;/h2&gt;
        &lt;p&gt;The page did render..&lt;/p&gt;

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

export default App;
</code></pre>

<p>But no slider appeas on the page... only the header and paragraph..</p>

<h1>Update</h1>

<p>This is what the React Inspection looks like:</p>

<p><a href="https://i.stack.imgur.com/PsgWB.png" rel="nofollow"><img src="https://i.stack.imgur.com/PsgWB.png" alt="React Inspect"></a></p>