Bonjour,
je cherche rendre interactif un svg généré en javascript. Je n'y arrive pas et je ne suis pas sur d'adopté la bonne stratégie pour y parvenir.
Pouvez vous m'aidez un peu?

voici mon code d'essais:
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <header></header>
    <main>
		<table border="1px">
		<td>
			<table>
				<tr>
					<td>
					<label for="cons">Gauge Consigne</label>
					</td>
				</tr>
				<tr>
					<td>
					<input id="cons" type="number" value="0" min="0" max="360"/>
					</td>
				</tr>
				<tr>
					<td>
					<input id="slide" type="range" value="0" min="0" max="360"/>
					</td>
				</tr>
			</table>
		</td>
		<td id="gauge_svg" width=300px height=300px>
		</td>
 
		</table>
 
<style>
.line {
stroke: #bfbfbf;
stroke-width: 1;
fill: none;
}
.gauge-ring {
    stroke: #EBEBEB;
}
 
</style>
<script>
class gauge {
            constructor({id = "gauge_svg"}){
 
                        this.container=document.getElementById(id)
                        this.container.innerHTML = /*html*/`
                        <input class="gauge-slide" type="hidden" value="0" min="0" max="360" />
                                        <svg id="gauge-container" width="100%" height="100%" viewBox="0 0 100 100">
                                                <g  transform="translate(50 50)" transform-origin= 50 50 >
                                                        <rect x="-50" y="-50" width="100" height="100" style="fill:lemonchiffon;stroke:slategray;stroke-width:1px;"/>
                                                        <line class="gauge-needleCons" x1="0" y1="40" x2="0" y2="45" />
 
                                                        <circle class="gauge-centre" cx="0" cy="0" r="5" fill="#eee" stroke="#ccc" stroke-width="0.1 " ></circle>
                                                        <circle class="gauge-ring" cx="0" cy="0" r="40" fill="transparent" stroke-width="3.5"></circle>
                                                        <g class="ori">
                                                                <g class="gaugeG"   transform="translate(0 40)" transform-origin= 0 40 >
                                                                        <circle class="gauge-bullCons"  cx="0" cy="0" r="10"  fill="#eee" stroke="#ccc" stroke-width="0.1 " ></circle>
                                                                        <text class="gauge-cons-text" x="0"  y="0"   stroke-width="0.5"    font-size=" 0.5em"    text-align= "center"   text-anchor= "middle" >
                                                                                <tspan class="gauge-consLabel"></tspan>
                                                                        </text>
                                                                </g>
                                                        </g>
                                                </g>
                                        </svg>
                                </input>
                        `
                        this.containerSVG=this.container.querySelector("svg")
                        this.bullCons = this.containerSVG.querySelector(".gauge-bullCons")
                        this.consLabel = this.containerSVG.querySelector(".gauge-consLabel")
                        this.gaugeconstext = this.containerSVG.querySelector(".gauge-cons-text")
                        this.gaugeG = this.containerSVG.querySelector(".gaugeG")
                        this.ori = this.containerSVG.querySelector(".ori")
                        this.slide = this.container.querySelector(".gauge-slide")
//                      this.slide.addEventListener("mousedown",this.mouse())
                        this.slide.mousedown = e => this.mouse()
                        this.indice=0
 
            }
            mouse(){
                        this.indice++
                        console.log('val:',this.indice)
                        this.slide.mousemove = e => {this.ctrl(event.currentTarget.value);console.log(value);}
 
            }
                ctrl(value){
                        this.bullCons.style.transform = `rotate(${value}deg)`
                        this.consLabel.innerHTML=value
                                this.ori.style.transform = `
                                rotate(${value}deg)
                        `;
                        this.gaugeconstext.style.transform = `
                                rotate(${-value}deg)
                                `;
                }
}
let gauge_di = {};//Dictionnaire des instances
gauge_di[1] = new gauge({id : "gauge_svg"})
 
 window.onload = function () {
                const container = document.querySelector("#gauge-container");
          const bullCons = container.querySelector(".gauge-bullCons");
          const consLabel = container.querySelector(".gauge-consLabel");
          const gaugeconstext = container.querySelector(".gauge-cons-text");
          const gaugeG = container.querySelector(".gaugeG");
          const ori = container.querySelector(".ori");
 
                document.querySelector("#cons").addEventListener("change", event => {
                                        gauge_di[1].ctrl(event.currentTarget.value)
                });
                 document.querySelector("#slide").addEventListener("mousedown", event => {
                                        document.querySelector("#slide").addEventListener("mousemove", event => {
                                        gauge_di[1].ctrl(event.currentTarget.value)
                                        });
                                });
    }
 
</script>
    </main>
    <footer></footer>
  </body>
</html>

Mon but est de pouvoir cliqué sur le cercle et de modifié la valeur en glissant comme le slidder existant a coté.

J'ai essayé de créé une balise input encadrant le svg, mais j'ai des doute sur cet stratégie. Quel est la bonne Méthode?
J'ai également des problèmes avec la gestion des event: la ligne 80 :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
this.slide.mousedown = e => this.mouse()
n'active pas la methode mouse comme je le souhaite.

En vous remerciant pour le temps que vous m'accorder.