Antes de nada, gracias por sus aportaciones. Tengo esto:
Código PHP:
<html>
<head>
<style type="text/css">
.rangeH {width: 140px; height: 60px; margin: 0; padding: 0; border: 0;
background-image: url("colores2.jpg");
-webkit-appearance: none; background-repeat: no-repeat;}
.rangeH::-webkit-slider-thumb, {-webkit-appearance: none;
width: 11px; height: 11px;
background-image: url("/rangeThumb.png")}
.rangeH:focus, .rangeV:focus {outline: 1px solid #28f;}
</style>
<meta http-equiv="refresh" content="1">
<meta http-equiv="Cache-Control" content="no-cache" />
</head>
<body>
<input type="range" class="rangeH" name="hs" min="0" max="100" value="<?php include("value.txt"); ?>" onChange="fn3(hs.value)">
</body>
</html>
El problema viene cuando intento cambiar el range a vertical, me parece que lo hago bien pero no se me muestra la imagen de fondo (es muy importante para mi proyecto)
Código PHP:
<html>
<head>
<style type="text/css">
.rangeH {width: 60px; height: 140px; margin: 0; padding: 0; border: 0;
background-image: url("colores3.jpg");
-webkit-appearance: slider-vertical; background-repeat: no-repeat;}
.rangeH::-webkit-slider-thumb, {-webkit-appearance: slider-vertical;
width: 11px; height: 11px;
background-image: url("/rangeThumb.png")}
.rangeH:focus, .rangeV:focus {outline: 1px solid #28f;}
</style>
<meta http-equiv="refresh" content="1">
<meta http-equiv="Cache-Control" content="no-cache" />
</head>
<body>
<input type="range" class="rangeH" name="hs" min="0" max="100" value="<?php include("value.txt"); ?>" onChange="fn3(hs.value)">
</body>
</html>
-------------------------------------------------------------------------------------------------