根据用户输入的值移动水

Question

我有一大堆水容器。概念是用户将提供水容器的最小和最大范围。如果它达到最低水平，水位的颜色应该显示为红色，我可以做但是如何根据用户给定的值更改值。上层是最大部分，下层是最小部分。

路径元素让我难以改变水位。我知道路径的d属性应该改变，但是如何使用用户值调整d属性。

    <script>
      const MIN = 0;
      const MAX = 100;
      // if it is near to minimum, color should be change to Red
      var svg = Snap('#svg');
      const s = Snap('#waterLevel');
      const path = Snap('#path-3');
      document.getElementById('inputValue').addEventListener('change', function(event){
        path.attr({
          d: `M140.79,105 L${event.target.value}`
        });
       if (event.target.value === "50") {
         console.log('yes');
         s.attr({
           fill: 'red'
         });
       }
      })
  </script>

这是更新的jsbin示例，其中使用了translate（0,0）

http://jsbin.com/pocicozini/1/edit?html,output