noUI slider tooltip

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.2.1/nouislider.min.css">
<br>
<br>
<div class="main_form">
  <div class="filter">
    <div id="range"></div>
    <div id="value">
      <form>
          of <input id="of" /> to <input id="to" />
      </form>
    </div>
  </div>
</div>

SCSS

.filter {
  margin-bottom: 55px;
  margin-top: 30%;
  padding: 0 20px;
  #value {
    margin: 50px auto 0;
    display: block;
    text-align: center;
    input#of, input#to {
      background: #fff none repeat scroll 0 0;
      border: none;
      border-bottom: 1px solid #d9d9d9;
      height: 30px;
      text-align: left;
      font-size: 14px;
      color: #3f3f3f;
      width: 90px !important;
      margin: 0 15px;
    }
  }
  .noUi-handle-upper {
    position: relative;
  }
  #tool-upper, #tool-lower, #tool-upper_s3, #tool-lower_s3 {
    position: absolute;
    top: -40px;
    font-size: 10px;
    width: 70px;
    text-align: center;
    left: 50%;
    @include transform(translateX(-50%));
    color: #000;
    &:after {
      width: 1px;
      height: 8px;
      content: '';
      background: #3a4652;
      position: absolute;
      bottom: -11px;
      left: 50%;
      @include transform(translateX(-50%));
    }
  }
}

JavaScript

$(document).ready(function () {
    "use strict";
    var minUI = $('input#of'),
        maxUI = $('input#to'),
        rangeSlider = document.getElementById('range');
    noUiSlider.create(rangeSlider, {
        start: [10000, 250000000 ],
        behaviour: 'drag-tap',
        connect: true,
        handles: 4,
        tooltips: [true],
        step: 1000,
        range: {
            'min': 10000,
            'max': 300000
        },
        format: wNumb({
            decimals: 0,
            thousand: ' ',
            postfix: ' $'
        })
    });
    $('.noUi-handle-upper').append('<div id="tool-upper"></div>');
    $('.noUi-handle-lower').append('<div id="tool-lower"></div>');

    var r11 =$('#tool-lower');
    var r22 =$('#tool-upper');

    rangeSlider.noUiSlider.on('update', function (v) {
        minUI.val(v[0], 10);
        maxUI.val(v[1], 10);
        r11.text(v[0], 10);
        r22.text(v[1], 10);
    });

    $(document).on('change', '#range + div input', function () {
        rangeSlider.noUiSlider.set([minUI.val(), maxUI.val()]);
    });
   
});
(function(){

    'use strict';

    var
        /** @const */ FormatOptions = [
            'decimals',
            'thousand',
            'mark',
            'prefix',
            'postfix',
            'encoder',
            'decoder',
            'negativeBefore',
            'negative',
            'edit',
            'undo'
        ];

// General

    // Reverse a string
    function strReverse ( a ) {
        return a.split('').reverse().join('');
    }

    // Check if a string starts with a specified prefix.
    function strStartsWith ( input, match ) {
        return input.substring(0, match.length) === match;
    }

    // Check is a string ends in a specified postfix.
    function strEndsWith ( input, match ) {
        return input.slice(-1 * match.length) === match;
    }

    // Throw an error if formatting options are incompatible.
    function throwEqualError( F, a, b ) {
        if (...