19190
スライダーのつまみを、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](http://qiita.com/bluebird/items/49ce2d2b34ae2ac4d934)  
HTMLやJavascriptは、こちらのサンプルコードを利用しています。

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

※次のサイトのようにしますと、つまみに画像は設定されるのですが、cssフィルタとの連携がうまくできませんでした。  
[Customising Cross-Browser Range Inputs with CSS and JavaScript](https://css-
tricks.com/custom-interactive-range-inputs/)
CC BY-SA 3.0
2015-11-23T03:41:37.637
19182
2015-11-23T05:46:01.350
12973
question
javascript html css
input rangeのつまみを画像にしたい
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>
```
CC BY-SA 3.0
2015-11-23T05:46:01.350
19190
2015-11-23T05:46:01.350
3054
19182
answer