JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<input id="foo" type="range">
<input id="custom1" type="range">
<input id="custom2" type="range">

CSS

input[type=range]#custom1 {
    -webkit-appearance: none;
    background-color: Red;
    width: 200px;
}
input[type=range]#custom2 {
    -webkit-appearance: none;
    background-color: blue;
    width: 200px;
}
input[type=range]#custom2::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: Green;
    opacity: 0.5;
    width: 10px;
    height: 40px;
}

JavaScript

//shadow dom test 
//via http://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/
// see also 
// http://www.w3.org/TR/shadow-dom/
// http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html
// http://www.sitepoint.com/the-basics-of-the-shadow-dom/