Ползунок диапазона - анимация выходного номера

Question

Я создал jsfiddle, показывающий простой ползунок диапазона с максимальным диапазоном 4.

Я пытаюсь добиться того, чтобы анимировать число в выводе, например, если вы сейчасна 1, и вы выбираете 4, 1 будет падать и исчезать, в то время как 4 придет сверху и исчезнет. С другой стороны, если вы выберете меньшее число, произойдет обратное.

Спасибовперед за вашу помощь!

jsfiddle: https://jsfiddle.net/hm0gxs54/12/

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">

      <div class="form-group">

        <div class="range-slider-wrap range-slider-lg">

          <input class="range-slider ng-valid ng-dirty ng-touched" step="1" type="range" id="range-slider" min="1" max="4" data-tooltip-top="true" aria-valuenow="3" aria-valuemin="1" aria-valuemax="4">

           <output class="range-slider-output num" id="range-slider-output" for="range-slider"></output>

         </div>

      </div>

    </div>
  </div>
</div>

CSS

.range-slider-output {
    position: relative;
    display: inline-block;
    padding: 0.2em 0.75em 0.25em;
    color: #fff;
    text-align: center;
    background: #666;
    border-radius: 3px;
    width: 100%;
    left: calc(50%);
    flex: 0 0 5%;
    align-self: center;
    margin: 0;
    font-size: 28px;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -92px;
}

.range-slider-output::before {
    position: absolute;
    top: 50%;
    left: 0;
    content: "";
}

.range-slider-lg .range-slider-output::before {
  top: 48px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
  border-color: #666 transparent transparent transparent;
  transition: all 0.7s ease-out;
}


.range-slider-wrap {
  min-width: 100px;
}

input[type='range'] {
  width: 100%;
  cursor: pointer;
  padding-top: 90px;
}
input[type='range'] {
  -webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  background: #e6e5e5;
  border: 1px solid #999;
  border-radius: 3px;
  -webkit-appearance: none;
  padding: 0 0.5rem;
}

input[type='range']::-moz-range-track {
  width: 100%;
  height: 5px;
  background: #e6e5e5;
  border: 1px solid #999;
  border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
    margin-top: -11px;
    background: #999;
    border: 1px solid #666;
    border-radius: 50%;
    -webkit-appearance: none;
}

input[type='range']::-moz-range-thumb {
  width: 28px;
  height: 28px;
  margin-top: -11px;
  background: #999;
  border: 1px solid #666;
  border-radius: 50%;
}

JS

$(function() {
    var slider = document.getElementById("range-slider");
    var output = document.getElementById("range-slider-output");

    output.innerHTML = slider.value;

    slider.oninput = function() {
      output.innerHTML = this.value;

    }


});