JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://rawcdn.githack.com/andreruffert/rangeslider.js/develop/dist/rangeslider.css">
<script src="https://rawcdn.githack.com/andreruffert/rangeslider.js/develop/dist/rangeslider.min.js"></script>
<div class="getright-saving-tool">
    <div class="getright-saving-tool-container" style="width:70%; margin:0 auto;">
        <div class="getright-saving-tool-slider">
            <h2 id="getright-besparing-output"></h2>
            <input type="range" min="50" max="1000" step="10" value="300" data-orientation="horizontal" data-rangeslider />
        </div>
        <div class="getright-saving-tool-graph">
            <div class="graph-rates graph-fixed-column">
                <h2 class="graph-title"><span id="averageCost">€ 4.392</span> <span class="small">Gemiddelde kosten</span></h2>
                <h2 class="graph-title" id="rateOnlineBedrijfsmakelaar"><span class="small">Ons tarief</span>€ 1.286</h2>
            </div>
            <div class="graph-bars">
                <div class="graph-bar saving" id="ml"></div>
                <div class="graph-bar" id="nvm"></div>
            </div>
            <div class="graph-saving graph-fixed-column" id="graphContainerHeight" style="height: calc(71% + 2px);">
                <h2 class="m-graph__title"><span class="small">Jij bespaart:</span> <span id="showAmountOfMoneySaved">€ 3.106</span></h2>
            </div>
        </div>

    </div>
</div>

CSS

.getright-saving-tool-graph{
        height:400px;
        position:relative;
        display:flex;
        border-bottom: 1px solid #e2e2e2;
        margin-top:30px;
    }

    .graph-bars{
        position:relative;
        flex:1;
    }

    .graph-rates{
        position:relative;
    }

    .graph-bar{
        width: 100%;
        height:100%;
        background:#3498db;
        position:absolute;
        top:0;
        left: 50%;
        transform:translateX(-50%);
        max-width: 130px;
        border-radius:0 0 10px 10px;
    }

    .graph-fixed-column{
        width: 30%;
        white-space: initial;
    }

    .rangeslider__fill{
        background: green;
    }

    .graph-bar.saving{
        background:green;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 999;
        min-height:150px;
        max-height:300px;
    }

    .graph-bar.saving:after, .graph-bar.saving:before {
        content: "";
        border-bottom: 4px dashed #2c4f67;
        width: 100%;
        padding-left: 30%;
        height: 4px;
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
    }

    .graph-bar.saving:before{
        height:0;
        border-bottom: 4px dashed #9c9c9c;
        top:0;
        margin-top: -4px;
    }

    .graph-title#rateOnlineBedrijfsmakelaar{
        position:absolute;
        margin-top:-40px;
    }

JavaScript

(function( $ ) {
	'use strict';

	var $output = $('#getright-besparing-output');
	var $range = $('input[type="range"]');
	var $savingGraph = $('.graph-bar.saving');
	var $rateOnlineBedrijfsmakelaar = $('#rateOnlineBedrijfsmakelaar');



	$(function(){
        $range.rangeslider({
			polyfill: false,

			onInit: function(){
				$output.html($range.val());
			},
			onSlide: function(position, value){
                var $rangeSlider = $('.rangeslider');

				var fullWidth = ($rangeSlider.width() - 42) ;



				var heightOfSaving = ((position / fullWidth) * 100);

				console.log(heightOfSaving);
				$savingGraph.css('height',  heightOfSaving + '%');
				$($rateOnlineBedrijfsmakelaar).css('top', $savingGraph.height() + 'px');

				$output.html(value);
            }
		});


	});



})( jQuery );