Slider starting in the middle at 0 and increasing up to 100 in both directions

Question

Hello SoSci team,

I am using sliders in my study to examine, for example, how unattractive or attractive a face is. AT the moment present the slider with the center starting at 50% and then increasing up to 100% on both directions. For that I use the html code below:

---

! <script type="text/javascript">
<!--
var formatter = function(value) {
  if (value < 0) return "";
  if (value < 50) {
   value = (102-value);
      
   }
value = Math.round(value-1);
 return  value + "%"; 
}
SoSciSliders.setFormat(formatter);
  
// -->
</script>

---

My question is, how can adjust this code so that the starting point in the center is set to 0 (not 50) with increases of up to 100 on both directions?

Thank you for your help!
Best

Answer 1

By and large, you decrease by 51 and multiply by 2.

var formatter = function(value) {
   if (value < 0) return "";
   value = Math.abs(Math.round((value - 51) * 2));
   return  value + "%"; 
}

Math.abs() will remove the minus.