title: Input range thumb css not working in chrome
body: <p>I am fixing input range CSS for cross browser platform.
  and i found this codepen which is: <a href="https://codepen.io/anon/pen/GxLOye" rel="nofollow noreferrer">https://codepen.io/anon/pen/GxLOye</a></p>
  
  <p>when i open the above link in my chrome its working fine..!</p>
  
  <p>when I replicate same code into jsfiddle its not working 
  <a href="https://jsfiddle.net/0tv7071L/2/" rel="nofollow noreferrer">https://jsfiddle.net/0tv7071L/2/</a></p>
  
  <pre><code>::-webkit-slider-thumb {
      @include size($thumb-width $thumb-height);
  
      appearance: none;
      background: $thumb-background;
      border-radius: $thumb-radius;
      box-shadow: makelongshadow($background-slider, $shadow-size);
      margin-top: $fit-thumb-in-slider;
      border: $thumb-border;
  }
  </code></pre>
  
  <p>I am not able to identify why this issue is coming.!</p>
  
  <p>how can I get the same input slider thumb, which is coming in Mozilla and IE in chrome as well..</p>
  
  <p>help is appreciated thanx.</p>
  
  <p>My chrome version: </p>
  
  <blockquote>
    <p>Google Chrome is up to date Version 65.0.3325.181 (Official Build)
    (64-bit)</p>
  </blockquote>