вращающаяся коробка с изменением скорости и размера

Question

Как можно разделить эти два ползунка, чтобы один отвечал за скорость, а второй - за длину и масштабирование изображения?

Как добавить больше ползунков для моих расчетов?

Как мне соединить его, чтобы получить один результат?

$(document).on('input', '#slider', '#sliders', function() {
  var speed = $(this).val();
  var length = $(this).val();
  $('#length').html(length * 1);
  $('#speed').html(speed);
  $('#speed1').html(speed * length);
  $("#spin").css("animation-duration", 10 / speed + "s");
});

#spin {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: 50% 50%;
  animation: rotateRight infinite linear;
  animation-duration: 0;
}

@keyframes rotateRight {
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<img id="spin" src="https://i.imgur.com/vyRVJPO.png">
<center>
  <div class="ess"><br><br><br><br>
    <img src="down.png" class="ess"><br>
  </div>
</center>
<br><br><br><br><br><br><br>
<center>

  <input type="range" min="0" max="100" value="0" class="slider" id="slider">
  <input type="range" min="0" max="100" value="0" class="sliders" id="sliders">
  <p class="samples1">Speed: <span id="speed"></span> m/s</p>
  <p class="samples1">ISum: <span id="speed1"></span> </p>
  <p class="samples1">Lenght: <span id="length"></span> m</p>

</center>

Answer 1

Вот исправление того, что у вас есть в настоящее время, которое позволяет обоим ползункам работать должным образом. Должно быть достаточно легко добавить дополнительные свойства, если потребуется позже. Я также сделал так, чтобы обработчик ввода изменял только те элементы dom, которые имеют отношение к обновляемому свойству. Хотя это не совсем необходимо.

(function() {
  var options = {
    speed: 0,
    length: 0
  };
  $(document).on('input', '#slider1,#slider2', function() {
    var property = this.name;
    options[property] = +$(this).val();
    var speed = options.speed;
    var length = options.length;
    switch (property) {
      case 'speed':
        $('#speed').html(speed);
        $("#spin").css("animation-duration", (speed ? 10 / speed : 0) + "s");
        break;
      case 'length':
        $('#length').html(length * 1);
        break;
    }
    if (property === 'speed' || property === 'length') {
      $('#speed1').html(speed * length);
    }
  });
}())

#spin {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: 50% 50%;
  animation: rotateRight infinite linear;
  animation-duration: 0;
}

@keyframes rotateRight {
  100% {
    transform: rotate(360deg);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<img id="spin" src="https://i.imgur.com/vyRVJPO.png">
<center>
  <div class="ess"><br><br><br><br>
    <img src="down.png" class="ess"><br>
  </div>
</center>
<br><br><br><br><br><br><br>
<center>

  <input type="range" min="0" max="100" value="0" class="slider" id="slider1" name="speed">
  <input type="range" min="0" max="100" value="0" class="sliders" id="slider2" name="length">
  <p class="samples1">Speed: <span id="speed"></span> m/s</p>
  <p class="samples1">ISum: <span id="speed1"></span> </p>
  <p class="samples1">Lenght: <span id="length"></span> m</p>

</center>