title: CSS: Styling range input?
body: <p>I'm trying to style a range input to look like <a href="https://www.wonga.com/" rel="nofollow">THIS</a></p>
  
  <p>I have no idea how to style a range input to use own image as the thumb and make the line under the thumb thicker and bigger.</p>
  
  <p>I did put a very basic example in this <a href="https://jsfiddle.net/BNm8j/5583/" rel="nofollow">FIDDLE</a></p>
  
  <p>Is it even possible to use own image for the range thumb and how would i go about making the line thicker and longer etc?</p>
  
  <p>This is my CSS:</p>
  
  <pre><code>input[type=range] {
      -webkit-appearance: none;
      background-color: blue;
      width: 200px;
      height:20px;
  
  }
  
  input[type="range"]::-webkit-slider-thumb {
       -webkit-appearance: none;
      background-color: #666;
      opacity: 0.5;
      width: 10px;
      height: 26px;
      background-image:url('THUMB-ICON.png');
  }
  </code></pre>
  
  <p>Any advise would be appreciated.</p>
  
  <p>Getting somewhere I think: <a href="https://jsfiddle.net/BNm8j/5586/" rel="nofollow">https://jsfiddle.net/BNm8j/5586/</a></p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I made some changes to this but I don't know why the top of the thumb is missing?</p>
  
  <p><a href="https://jsfiddle.net/BNm8j/5588/" rel="nofollow">https://jsfiddle.net/BNm8j/5588/</a></p>
  
  <p>any ideas anyone?</p>