如何在保留range input默认样式的同时添加WebKit滑块样式

背景 #

我想给range输入元素（比如<input type="range" min="5" max="20" step="1" value="10">）用CSS设置样式。我知道用WebKit的方法能在Chrome这类浏览器里生效，但必须加input[type=range] { -webkit-appearance: none; }才能让其他WebKit样式生效，可这会破坏Firefox等其他浏览器的滑块默认样式。

我也了解可以用::-moz-range-thumb或::-ms-thumb这类选择器给其他浏览器适配样式，但担心存在不支持这些前缀选择器的浏览器。

核心问题 #

能不能在使用WebKit自定义样式的同时，给所有支持range输入的浏览器保留默认样式选项？我优先纯CSS方案，也接受需要JavaScript的方案。

示例代码 #

下面的代码在Chrome等WebKit浏览器里表现正常，但在其他浏览器里样式不符合需求。（再次说明：我知道::-moz-*和::-ms-*选择器，但担心覆盖不到所有浏览器。）

HTML代码 #

<input type="range" min="5" max="20" step="1" value="10">

CSS代码 #

input[type=range] {
    -webkit-appearance: none;
    max-width: 100%;
    width: 300px;
}

input[type=range]::-webkit-slider-runnable-track {
    background: lightgray;
    border: solid gray 1px;
    border-radius: 3px;
    height: 5px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: skyblue;
    border: solid gray 1px;
    border-radius: 10px;
    height: 20px;
    margin-top: -9px;
    width: 30px;
}

内容的提问来源于stack exchange，提问作者superswellsam