Le potentiomètre n'a de vectoriel que les images qui le composent. Ce sont des fichiers au format svg produits à l'aide l'éditeur en ligne SVG-Edit.
Le code suivant ne traite pas le tiré-glissé mais le clic de la souris seulement. L'essai intégrant ces deux évènements n'ayant pas donné satisfaction. Avis aux commentaires...
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slider</title>
<style>
#sli {
width:40px;
height:40px;
left:10px;
position:absolute;
top:150px;
}
#plast {
width:30px;
height:180px;
position:absolute;
left:15px;
}
#inf {
position:absolute;
left:60px;
top:10px;
background-color: #00b300;
border-radius: 5px;
box-shadow: 4px 4px 2px #373737;
color:white;
font-family:verdana;
text-align: center;
width:50px;
}
#ghost {
width:30px;
height:180px;
position:absolute;
left:15px;
//border-style: solid;
//border-width: 1px;
}
</style>
</head>
<body >
<img id="plast" src="./slid.svg">
<img id="sli" src="./butg.svg">
<span id="inf">0</span>
<img id="ghost" src="./ghost2.gif">
<div></div>
<script>
document.getElementById("ghost").addEventListener("mousedown", addevent);
document.getElementById("ghost").addEventListener("mouseup", removeevent);
function putslide() {
var y = event.clientY-20;
if (y>150) y=150;
if (y<10) y=10;
var ind=150-y;
document.getElementById("inf").innerHTML=ind;
var but=document.getElementById("sli");
but.style.top = y + "px";
window.location.href="./test.php?ind="+ind;
}
function addevent() {
document.getElementById("ghost").addEventListener("mousemove", putslide);
putslide();
}
function removeevent() {
document.getElementById("ghost").removeEventListener("mousemove", putslide);
}
</script>
</html>
Lecture du code à suivre
