<div class="box-range">
                      <input type="number" id="number" class="range-input" name="valInput" min="0" max="15" onkeyup="keyupFunction()">
                      <div class="range-wrap">
                        <div class="range-slider">
                          <input id="range1" class="ranger" type="range" name="rangeInput" min="1" max="15" step="1" onchange="showVal(this.value)"/>
                        </div>
                      </div>
                    </div>

    .range-slider * {
        margin: 0;
        padding: 0;
        border: 0;
    }    
    .range-slider, 
    .range-ticks,
    .label-range{
        display: flex;
    }
    .range-slider {
        flex-flow: column nowrap;
        margin: 0 auto;
        font-size: calc(20px + (20)*(100vw)/(2000));
        box-sizing: border-box;    
    }
    .range-slider input[type=range], 
    .range {
        border-radius: 0.75em;
        overflow: hidden;
        position: relative;
        height: 1.5em;    
    }
    .range-slider input[type=range] {
        background-color: transparent;
        font: 1em/1.5 'Roboto Condensed', sans-serif;
        box-shadow: 0.3em 0.3em 0.4em #c1c2c5 inset, -0.3em -0.3em 0.4em #fff inset;
        display: block;
        width: 100%;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .range-slider input[type=range]:focus {
        outline: transparent;
    }
    .range-ticks {
        font: 1em/1.5 'Roboto Condensed', sans-serif;
        justify-content: space-between;
        align-items: center;
        pointer-events: none;
        position: absolute;
        top: 0.04em;
        left: 0.75em;
        width: calc(100% - 1.5em);
        height: 100%;
    }
    .range-tick, 
    .range-tick-text {
        display: inline-block;
    }
    .range-tick {
        color: #454954;
        font-size: 0.5em;
        text-align: center;
        width: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
    .range-tick-text {
        transform: translateX(-50%);
    }
    .label-range {
        font: 0.8em/1.5 'Roboto Condensed', sans-serif;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
    .data-range {
        display: flex;
        height: 3em;    
        width: 3em;
        justify-content: center;
        align-items: center;    
        text-align: center;
        font: bold 0.5em/1.5 'Roboto Condensed', sans-serif;
        color: #FFF;
        position: absolute;
        top: 0;
        z-index: 2;
        pointer-events: none;
        background-color: #337AB7;
        border: 0;
        border-radius: 50%;
        box-shadow: -0.3em -0.3em 0.5em #0d518c inset, 0 -0.2em 0.2em 0 rgba(0,0,0,0.2), 0.3em 0.5em 0.8em  rgba(0,0,0,0.3);
    }

window.addEventListener("DOMContentLoaded",() => {
      let range1 = new rSlider({
          element: "#range1",
          tick: 1
      });
  });
  class rSlider {
      constructor(args) {
          this.el = document.querySelector(args.element);
          this.min = +this.el.min || 0;
          this.max = +this.el.max || 100;
          this.step = +this.el.step || 1;
          this.tick = args.tick || this.step;
          this.addTicks();
          this.dataRange = document.createElement("div");
          this.dataRange.className = "data-range";
          this.el.parentElement.appendChild(this.dataRange,this.el);    
          this.updatePos();
          this.el.addEventListener("input",() => {
              this.updatePos();
          });
      }
      addTicks() {
          let wrap = document.createElement("div");
          wrap.className = "range";
          this.el.parentElement.insertBefore(wrap,this.el);
          wrap.appendChild(this.el);
          let ticks = document.createElement("div");
          ticks.className = "range-ticks";
          wrap.appendChild(ticks);
          for (let t = this.min; t <= this.max; t += this.tick) {
              let tick = document.createElement("span");
              tick.className = "range-tick";
              ticks.appendChild(tick);
              let tickText = document.createElement("span");
              tickText.className = "range-tick-text";
              tick.appendChild(tickText);
              tickText.textContent = t;
          }
      }    
      getRangePercent() {
          let max = this.el.max,
          min = this.el.min,
          relativeValue = this.el.value - min,
          ticks = max - min,
          percent = relativeValue / ticks;
          return percent;
      }
      updatePos() {
          let percent = this.getRangePercent(),
          left = percent * 100,
          emAdjust = percent * 3;
          this.dataRange.style.left = `calc(${left}% - ${emAdjust}em)`;
          this.dataRange.innerHTML = this.el.value;
      }
  }

    function showVal(newVal){
      document.getElementById("number").value=newVal;
      document.getElementById("valNum").value=newVal;
    }

    $('#number').on('change', function () {
      var newval = $('#number').val();
      $('#valNum').val(newval);
      $('.ranger').val(newval);
    });