JQuery Slider Animation

by rimshot609

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>Setting Slider Programmatically</h1>

<div id="slider"></div>

<p>Slider Value<span id="sliderValue"></span></p>

<input type="button" value="Start Slider Animation" onclick="startSlider()">

CSS

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}

JavaScript

let valueArray = [101, 102, 103, 104, 105]
let durationArray = [800, 600, 550, 700, 300]
$("#sliderValue").html(100)
$("#slider").slider({
  value: 100,
  min: 0,
  max: 200,
  step: 1,
  slide: function(event, ui) {
    $("#sliderValue").html(ui.value);
  }
});

function pausecomp(millis, value) {
  var date = new Date();
  var curDate = null;
  do {
    curDate = new Date();
  }
  while (curDate - date < millis);
  console.log(value)
  $('#sliderValue').html(value)
  $("#slider").slider("option", "value", value);
  console.log('end')
}

function startSlider() {
console.log('begin')
  $("#sliderValue").html(100);
  $("#slider").slider("option", "value", 100);
  for (var i = 0; i < valueArray.length; i++) {
    pausecomp(durationArray[i], valueArray[i]);
  }
}