No puedo encontrar una manera de que cuando el valor sea superior a 180 (usando una declaración if), comience a ser negativo, por ejemplo: cuando el valor sea superior a 180, el elemento con el id "texto" se convierte en -179 luego, a medida que el control deslizante avanza, se convierte en -1. Aquí está mi código;
var slider = document.getElementById("slider"); slider.addEventListener('input', () => { document.getElementById("text").innerHTML = slider.value; document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`; var tv = document.getElementById("text").innerHTML; if (slider.value > 180) { neg(); }; //else when it goes back function neg() { //stack overflow how to document.querySelector("#text").innerHTML = Math.floor(-slider.value + 360 / 2); } }); body { display: flex; align-items: center; justify-content: center; } #outer { background: red; height: 20vw; position: relative; border-radius: 50%; width: 20vw; display: flex; justify-content: center; } #inner { transform: rotateZ(180deg) translateY(10%); border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; position: absolute; top: 0; background: darkgreen; width: 10%; height: 50%; } #text { text-align: center; width: 3ch; } .item { border: 2px solid black; } <div class="item" id="outer"> <div id="inner"></div> </div> <input class="item" value="0" min="0" max="360" type="range" id="slider"> <div id="text" class="item" style="background-color:lightgrey;padding-inline:1vw;border-radius:10%;border:1vh solid black;"> 0 </div>En este momento, se reinicia en -0 en lugar de -179. Lo siento si el código está desordenado, porque he estado experimentando para resolver esto.
Creo que esto hace lo que estás buscando:
if (slider.value > 180) { document.querySelector("#text").innerHTML = slider.value - 360; };Después de que slider.value sea > 180, el valor de visualización cambia a slider.value - 360.
slider.value = 181 then display value is 181 - 360 = -179 slider.value = 182 then display value is 182 - 360 = -178 slider.value = 183 then display value is 183 - 360 = -177 ... var slider = document.getElementById("slider"); slider.addEventListener('input', () => { document.getElementById("text").innerHTML = slider.value; document.getElementById("outer").style.transform = `rotate(${slider.value}deg)`; var tv = document.getElementById("text").innerHTML; if (slider.value > 180) { document.querySelector("#text").innerHTML = slider.value - 360; }; }); body { display: flex; align-items: center; justify-content: center; } #outer { background: red; height: 20vw; position: relative; border-radius: 50%; width: 20vw; display: flex; justify-content: center; } #inner { transform: rotateZ(180deg) translateY(10%); border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; position: absolute; top: 0; background: darkgreen; width: 10%; height: 50%; } #text { text-align: center; width: 3ch; } .item { border: 2px solid black; } <div class="item" id="outer"> <div id="inner"></div> </div> <input class="item" value="0" min="0" max="360" type="range" id="slider"> <div id="text" class="item" style="background-color:lightgrey;padding-inline:1vw;border-radius:10%;border:1vh solid black;"> 0</div>