JSFiddle - React, Tailwind, and code Playground

HTML

<div id="calc-form">
	<!-- <form oninput="updateRanges()"> -->
<form oninput="updateRanges()" onchange="updateRanges()">  <!-- Works party in i IE--->       	                 
              <div id="calc-heading">Dugnadskalkulator</div>                           
              
         <div id="calc-content">                                  
                      <div class="slider">How much money does the group want to earn?  
                       <div class="styled-output"><div id="r10">1400</div>kr</div> 
                                       
                                       <input type="range" name="r10" step="1400" min="1400" max="160000" value="0">
                      </div>  

	<p> 	  <div class="resultat-salgprodukter">Amount of products to sell: <span>20</span> <br /></p>                                 
                        <div class="slider">Select amount of participants in the group: <br /> 
                         <div class="styled-output"><div id="r20">1</div></div> 
                                       
                                       <input type="range" name="r20" step="1" min="1" max="40" value="1">
                        </div>
              </div>          
                        
                                                       
               <div class="resultat-salgdeltager">Amount of birthday boxes per participant: <br/><span>20</span></div>
               
                                  
               <div id="calc-sammendrag-heading">Summery</div>
               <div class="calc-sammendrag">
                                  
               		<p>
               		<div class="resultat-salgprodukter">
                  		 Total products: <span>20</span> 
               		</div>
                                  
               		<div class="resultat-kartonger">
               		     Amount of cartons of 20 boxes: <span>1</span>
              		</div>
                                  
             ...

CSS

/* the full form area */
#calc-form  {
	border: 1px solid #333;
	/* padding: 17px; */
	border-radius: 7px;
	box-shadow: 0px 3px 5px #444;
	width: 300px;
	
}

#calc-heading {
	background: #a0ce4e;
	color: #fff;
	font-size: 26px;
	border-bottom: 1px solid #333;
	padding: 17px;
	border-radius: 7px 7px 0px 0px;
	font-family: times, serif;
	text-align: center;
	text-shadow: 1px 1px 1px #0a0909;
	letter-spacing: 1.8px;
}

#calc-content {
	padding: 13px;
	font-size: 18px;
	background: #f8f1f1;
}

.styled-output {
	clear: both;
	
	/* text-align: center; */
	margin: 5px 0 0 0;
	padding: 5px 10px 0 9px;
	/* width: 75px; */	
	
	text-align: center;
	border: 1px solid #dbc9c9;
	color: #67990f;
	font-size: 20px;
}

.resultat-salgdeltager {
    text-align: center;
    color: #67990f;
    margin-bottom: 7px;
    font-size: 18px;
}	

#calc-sammendrag-heading {
	font-size: 26px;
	border-bottom: 1px solid #333;
	padding: 17px;
	border-radius: 7px 7px 0px 0px;
	font-family: times, serif;
	text-align: center;
}

.calc-sammendrag {
	text-align: left;
	/* border: 1px solid #333; */
	padding: 4px;
}



	
input[type=range] {
  -webkit-appearance: none;
  margin: 5px 0 25px 0;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #3071a9;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 22px;
  width: 25px;			/* Changed */
  border-radius: 10px;   /* 3px */
  background:  #a0ce4e;	/* #fff */
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;		/* Changed */
  
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #367ebd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
 ...

JavaScript

function updateRanges(){
	
	// update all ranges' outputs (visual effect only
	// since we do math on range values and not outputs)
	jQuery('input[type="range"]').each(function(){
		var rangeNum = jQuery(this).val(),
				rangeFor = jQuery(this).attr('name');
		
		// jQuery('output[for="'+rangeFor+'"]').val(rangeNum);
        document.getElementById(rangeFor).innerHTML = rangeNum;
	});
	
	// update the total value
	var rangeVals = {
		'one' : parseInt(jQuery('input[name="r10"]').val()), // Hvor mye penger ønsker gruppen å tjene? 
		'two' : parseInt(jQuery('input[name="r20"]').val()), // Velg antall deltagere i gruppen: 
	};
	
	// Do the math
	jQuery('.resultat-salgprodukter span').html(rangeVals.one / 70); // Antall produkter å selge
	jQuery('.resultat-salgdeltager span').html(Math.round((rangeVals.one / 70 / rangeVals.two) * 1) / 1); // Antall salg pr. deltager:  1 = no decimals, 100 = 2 decimals */
	
	
	// Sammendrag
	jQuery('.resultat-produktertotalt span').html(Math.round((rangeVals.one / 70) * 1) / 1); // Antall Produkter Totalt:
	jQuery('.resultat-kartonger span').html(rangeVals.one / 70 / 20); // Antall Kartonger a 20 esker
		
	//jQuery('.result-salg span').html(Math.round((rangeVals.one / rangeVals.two) * 1) / 1); /* 1 = no decimals, 100 = 2 decimals */
	
	jQuery('input').change( function() {
	    updateRanges()
	});    
	
}