JavaScript input range

Question

input rangeのつまみ部分度画像に設定するCSSを適応させました
設定された画像URLをJavaScriptで取得したいんですが、
要素にアクセスしても拾えません
原因がわかる方回答お願いいたします

<style>
input[type=range]{
	-webkit-appearance: none;
}
/* Chrome */
input[type=range]::-webkit-slider-runnable-track{
	height: 5px;
	background: gray;
}
input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance: none;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	background: url("https://pngimg.com/uploads/free/free_PNG90756.png") no-repeat 0 0;
}
/* Firefox */
input[type=range]::-moz-range-track{
	height: 5px;
	background: gray;
}
input[type="range"]::-moz-range-thumb{
	width: 48px;
	height: 48px;
	margin-top: -24px;
	background: url("https://pngimg.com/uploads/free/free_PNG90756.png") no-repeat 0 0;
}
</style>

<script>
window.onload=function(){
range = document.createElement ("input");
range.type="range";
range.min="0";
range.max="100";
range.style.width="100px";
range.style.height="50px";
document.body.appendChild(range);

Array.from(document.querySelectorAll("input[type=range]"), r => {
alert(r.style.backgroundImage);//空になる
});
}
</script>

Answer 1

背景画像をあてているのがrange自体ではなく、疑似要素だからだと思います。

「JavaScriptから疑似要素を取得」という観点で調べてみましたら、Window.getComputedStyle()から
CSSStyleDeclaration.getPropertyValue()というのが見つかりました。
ご参考まで。

	Array.from(document.querySelectorAll("input[type=range]"), r => {
		var property = window.getComputedStyle(r, '::-moz-range-thumb').getPropertyValue('background-image')
		console.log(property);//url("https://pngimg.com/uploads/free/free_PNG90756.png")
	});

JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する

---

以下、編集前の回答

画像が枠に対して大きすぎるだけですね。
background-sizeで枠におさまるように調整してみてください。