JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/SteveSanderson/knockout/master/build/output/knockout-latest.debug.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<div>
    savings <input type='text' id='savings' value=3></input> <div id="savingsSlider"></div> 
</div>

<div>
spent <input type='text' id='spent' value=4></input> <div id="spentSlider"></div>
</div>

<div id='result'>reshere</div>

CSS

div{
    padding: 50px;
}

JavaScript

// limits all input to numbers
$('input[type="text"]').keydown(function(event) {
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || (event.keyCode == 65 && event.ctrlKey === true) || (event.keyCode >= 35 && event.keyCode <= 39)) {
        return;
    }
    else {
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
            event.preventDefault();
        }
    }
});

// create sliders
$('#spentSlider').slider({
    range: "min",
    min: 0,
    max: 200,
    value: $('#spent').val(),
    slide: function(event, ui) {
        $('#spent').val(ui.value);
    },
    change: function(event, ui) {
        DoCalc();
    }
});

$('#savingsSlider').slider({
    range: "min",
    max: 120,
    value: $('#savings').val(),
    slide: function(event, ui) {
        $('#savings').val(ui.value);
    },
    change: function(event, ui) {
        DoCalc();
    }
});

$('#spentSlider').slider();
$('#savingsSlider').slider();


// link textboxes to sliders
$('input[type="text"]').keyup(function(event) {
    var textInput = 0;

    if ($(this).val() == '') {
        textInput = 0;
    }
    else {
        textInput = parseInt($(this).val());
    }

    if (this.id == 'savings') {
        $("#savingsSlider").slider('option', 'value', textInput);
    }

    if (this.id == 'spent') {
        $("#spentSlider").slider('option', 'value', textInput);
    }

});


function DoCalc() {
    $('#result').html(parseInt($('#savings').val()) - parseInt($('#spent').val()));
}