nouislider

script.js

// https://refreshless.com/nouislider/
<script src="wNumb.min.js"></script>
<script src="nouislider.min.js"></script>
<link rel="stylesheet" href="/nouislider.min.css">
(function (){
    var roundHundred = function(value){
        return Math.round(value/100)*100;
    };
    var calcFunc = function () {
        var calcTotal = document.querySelector('#calc-total');
        var costHour = 1300;
        var comp = + document.querySelector('#i-computer').value;
        var server = + document.querySelector('#i-server').value;
        var totalHour = Math.ceil(comp/3);
        var total = (comp/12 + server + totalHour)*costHour;
        calcTotal.innerHTML = roundHundred(total);
    };
   var sliderFunc = function (range, input, min, max) {
        var calcSlider = document.querySelector(range);
        var input = document.querySelector(input);
        var inputs = [input];
        noUiSlider.create(calcSlider, {
            format: wNumb({
                decimals: 0,
            }),
            start: 0,
            step: 1,
            behaviour: 'drag',
            connect: true,
            tooltips: true,
            range: {
                'min': min,
                'max': max
            },
            pips: {
                mode: 'values',
                values: [min, max],
            }
        });

        calcSlider.noUiSlider.on('update', function (values, handle) {
            inputs[handle].value = values[handle];
            calcFunc();
        });
        inputs.forEach(function (input, handle) {
            input.addEventListener('change', function () {
                calcSlider.noUiSlider.setHandle(handle, this.value);
            });
            input.addEventListener('keydown', function (e) {
                var values = calcSlider.noUiSlider.get();
                var value = Number(values[handle]);
                var steps = calcSlider.noUiSlider.steps();
                var step = steps[handle];
                var position;
                switch (e.which) {
                    case 13:
                        calcSlider.noUiSlider.setHandle(handle, this.value);
                        break;
                    case 38:
                        position = step[1];
                        if (position === false) {
                            position = 1;
                        }
                        if (position !== null) {
                            calcSlider.noUiSlider.setHandle(handle, value + position);
                        }
                        break;
                    case 40:
                        position = step[0];
                        if (position === false) {
                            position = 1;
                        }
                        if (position !== null) {
                            calcSlider.noUiSlider.setHandle(handle, value - position);
                        }
                    break;
                }
            });
        });
        var calcReset = document.querySelector('#b-calc-reset');
        calcReset.addEventListener('click', function () {
            calcSlider.noUiSlider.reset();
        });
    };
    sliderFunc('#r-server', '#i-server', 0, 10);
    sliderFunc('#r-computer', '#i-computer', 3, 50);
    sliderFunc('#r-hour', '#i-hour', 1, 16);
}());
(function (){
    var rangeComp = document.querySelector('#r-computer');
    var rangeHour = document.querySelector('#r-hour');
    var inputHour = document.querySelector('#i-hour');
    rangeComp.noUiSlider.on('update', function (values, handle) {
        var value = values[handle];
        inputHour.value = Math.floor(value/3);
        rangeHour.noUiSlider.set([Math.ceil(value/3)]);
    });
}());