Нужна помощь Javascript Inline SVG

Question

Я не могу перевести bar_position используя javascript.

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

См. Ручку Датчик положения от Джона ( @ johnkelton ) на CodePen .

Answer 1

У вас есть три числа: start, value и end.Вы можете получить процент value между start и end с помощью следующего уравнения:

( value - minimum ) / ( maximum - minimum)

Затем вы можете конвертировать этот процент в пользовательский интерфейс, умножив на ширину элемента, чтов коде ручки жестко задано значение 50.834 пикселей:

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