Javascript Inline SVG Help Needed

Question

I am unable to translate the bar_position using javascript.

slider3.oninput = function() {
output3.innerHTML = this.value;
bar_position.style.transform='translate(0)';
}

See the Pen Position Gauge by John (@johnkelton) on CodePen.

Answer 1

You have three numbers: start, value, and end. You can get the percentage value is between start and end with the following equation:

( value - minimum ) / ( maximum - minimum)

You can then convert that percentage to the UI by multiplying by the width of the element, which is hardcoded to be 50.834 pixels in the codepen:

const x = ( this.value - output1.innerHTML ) / ( output2.innerHTML - output1.innerHTML ) * 50.834;
bar_position.style.transform=`translate(${x}px)`;