input rangeのつまみを画像にしたい

スライダーのつまみを、cssで画像に設定したいです。

#filter input[type = "range"]::-webkit-slider-thumb {
    width: 20px; height: 20px; border:0; cursor:-webkit-grab; -webkit-appearance: none !important; background:url("image/thumb.png") no-repeat 0 0;
}

としても、反映されませんでした。

CSSフィルタことはじめ（２）Qiita
HTMLやJavascriptは、こちらのサンプルコードを利用しています。

どうにか設定する方法はございますでしょうか？

※次のサイトのようにしますと、つまみに画像は設定されるのですが、cssフィルタとの連携がうまくできませんでした。
Customising Cross-Browser Range Inputs with CSS and JavaScript