title: Can't figure out how to style rc-slider (React Component Slider) via inline styling
body: <p>I've read the docs many times over and still don't fully understand how to style the React slider via inline CSS (<a href="https://github.com/react-component/slider" rel="noreferrer">https://github.com/react-component/slider</a>).</p>
  
  <p>I see that you need to pass a <code>handle</code> props to the slider with the css and some kind of component with offset and value props. When I try to do this, my CSS comes back horrible with the knobs not moving and the slider being all over the place. Regular styling doesn't work on the slider.</p>
  
  <p>This is how my component that I pass on to the slider component looks like:</p>
  
  <p>import React from "react";</p>
  
  <pre><code>export default class SliderStyle extends React.Component {
    render(){
      let style = {
        position: "absolute",
        left: "0",
        height: "15px",
        borderRadius: "8px",
        backgroundColor: "#000"
      };
  
      let tracker = {
        position: "absolute",
        marginLeft: "-7px",
        marginTop: "-5px",
        width: "14px",
        height: "14px",
        cursor: "pointer",
        borderRadius: "50%",
        border: "solid 2px #000",
        backgroundColor: "#fff"
      }
  
  
      return(
        &lt;div style={style}&gt;&lt;div style={tracker}&gt;&lt;/div&gt;&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Then in the main component:</p>
  
  <pre><code>&lt;Slider range allowCross={false} handle={&lt;SliderStyle/&gt;} value={this.state.range} onChange={this.onSliderChange.bind(this)}/&gt;
  </code></pre>
  
  <p>I'm assuming the div I return from the component that I pass into the Slider component is the actual slider, and the div inside the first one is what will be the knob. The colors change, but the slider knob doesn't move when values change.</p>
  
  <p><a href="https://i.stack.imgur.com/h3jq9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/h3jq9.png" alt="enter image description here"></a></p>
  
  <p>Is there something I'm not getting here?</p>