Jquery ui滑块具有翻转计数器效果

Question

我想像这样http://demo.cnanney.com/apple-counter-revisited/实现jQuery ui flip counter插件。但我的要求是，与示范不同，范围滑块用于增量和步速值。但在我的情况下，我希望两个ui滑块值相乘并显示为具有翻转计数器效果的输出。

以下是代码：HTML和JS

<div class="clearfix">
  <div class="counter-wrapper">
    <ul class="flip-counter default" id="myCounter"></ul>
  </div>
</div>

<ul id="demo_controls">
  <li>
    <p>Increment: <span id="inc_value">85</span></p>

    <div id="inc_slider" class="demo_widget"></div>
  </li>
  <li>
    <p>Pace: <span id="pace_value">9</span></p>

    <div id="pace_slider" class="demo_widget"></div>
  </li>
</ul>

这是我试图通过mycounter将两个滑块的乘法值显示为id的脚本，

<script>

  $(function(){
    function updateAmounts() {

    var value1 = $('#inc_value').slider('value');

    var value2 = $('#pace_value').slider('value');

    $('#myCounter').val((value1 * value2) * valueMultiplier);

    }
    var valueMultiplier = 12;

    $('#inc_slider').slider({
      range: 'max',
      value: 85,
      min: 0,
      max: 332,
      slide: function(event, ui){
        $('#inc_value').text(ui.value);
        updateAmounts();
      }
    });

    // Pace
    $('#pace_slider').slider({
      range: 'max',
      value: 9,
      min: 0,
      max: 18,
      step: 3,
      slide: function(event, ui){
        $("#pace_value").text(ui.value);
        updateAmounts();
      }
    });

  });
</script>