Progress Bar by Input

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<div class="row">
  <div class="col">
    <div class="progress progress-striped active">             
      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">             
        <span class="sr-only">100%</span>             
      </div>
    </div>
  </div>
  <div class="col">
    <input type="text" id="progress">
  </div>
</div>

CSS

body {
  padding-top:80px;
}

JavaScript

var inputProgress = document.getElementById('progress');
var ProgressBar = document.getElementsByClassName('progress-bar');

inputProgress.onkeyup = function(e){
	ProgressBar[0].style.width = inputProgress.value+'%';
};