input要素自体にも-webkit-appearance: none;
を指定する必要があるようです。
#filter input[type=range]{ -webkit-appearance: none; }
こうすると、スライダーの横線もデフォルトのスタイルが消えるので、::-webkit-slider-runnable-track
も設定します。
#filter input[type=range]{
-webkit-appearance: none;
width: 300px;
}
/* Chrome */
#filter input[type=range]::-webkit-slider-runnable-track{
height: 5px;
background: gray;
}
#filter input[type="range"]::-webkit-slider-thumb{
-webkit-appearance: none;
width: 48px;
height: 48px;
margin-top: -24px;
background: url("https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/2.1/action/1x_web/ic_face_black_48dp.png") no-repeat 0 0;
}
/* Firefox */
#filter input[type=range]::-moz-range-track{
height: 5px;
background: gray;
}
#filter input[type="range"]::-moz-range-thumb{
width: 48px;
height: 48px;
margin-top: -24px;
background: url("https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/2.1/action/1x_web/ic_face_black_48dp.png") no-repeat 0 0;
}
<div id="filter">
<input type="range" id="blur" value="" min="0" max="10">
</div>