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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Right now, it resets at -0 instead of -179. Sorry if the code is messy, because I have been experimenting to figure this out.

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>