イメージをHTMLスライダの背景として使用できますか？

Question

背景としてグレースケール画像を使用したいので、スライダを変更してグレースケールの強度を入力することができます。しかし、私はそれが可能かどうか、それを行う方法がわかりません。ありがとうございました。種類のこのような

何か：

Answer 1

あなたは親指とトラックのスタイルを設定することができますが、それはかなりすべてのブラウザごとに異なるCSSです。詳細は、https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/を参照してください。もちろん

input[type=range]::-webkit-slider-runnable-track { 
    -webkit-appearance: none; 
    width: 100%; 
    height: 15px; 
    background: linear-gradient(to right, black, white); 
    border: 2px solid grey; 
} 

input[type=range]::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    border: none; 
    height: 40px; 
    width: 40px; 
    border-radius: 20px; 
    background-color: blue; 
    cursor: pointer; 
} 

https://jsfiddle.net/vms19x32/