I can't find a way for when the value is over 180 (using an if statement), it starts going down as a negative, for example: when the value is over 180, the element with the id "text" becomes -179 then as the slider goes farther, it becomes up to -1. Here is my code;
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>Right now, it resets at -0 instead of -179. Sorry if the code is messy, because I have been experimenting to figure this out.
I think this does what you're looking for:
if (slider.value > 180) {
document.querySelector("#text").innerHTML = slider.value - 360;
};
After slider.value is > 180, the display value switches to 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>