JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div id="slider">
1% <input id="slide" type="range" min="1"  step="1" value="0"
 onchange=" return updateSlider(this)" />
 <span id='spanslide'></span>
</div>
<div id="slider1">
1% <input id="slide1" type="range" min="1"  step="1" value="0" 
 onchange="return updateSlider(this)" />
 <span id='spanslide1'></span>
</div>
 <div id="slider2">
1% <input id="slide2" type="range" min="1"  step="1" value="0"
 onchange="return updateSlider(this)" />
  <span id='spanslide2'></span>
</div>
<div class='popup' id='popup'>
	<div id='vertical'>
		Max limit reached
		<div><input class='btn' type='button' value='Ok' onclick='dissolve(this,"popup")'><div>
	</div>
</div>

CSS

.popup{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display:none;
}
#vertical{ 
    position:absolute; 
    top:50%; /* adjust this as needed */     
    left:0; 
    width:100%; 
    text-align:center;
}

JavaScript

arr = [];sum = 0;

function updateSlider(obj){
	
	id = obj.id;
	sum = sum123();
	prevValue = parseInt(obj.value);
	if(sum>250){
        document.getElementById('popup').style.display = 'block';
	    obj.value = 250 - sum + prevValue;
	}
	document.getElementById('span'+id).innerHTML = obj.value 
}
function sum123(){
	var i = parseInt(document.getElementById('slide').value);
	var j = parseInt(document.getElementById('slide1').value);
	var k = parseInt(document.getElementById('slide2').value);
	
	return i+j+k;
}
function dissolve(obj,clsNm){
	var tgt = findAncestorByClsName(obj,clsNm);
	tgt.style.display = 'none';
}

function findAncestorByClsName(start,clsNm){
    
	if(typeof start.className !== 'undefined' && clsNm.toUpperCase() === start.className.toUpperCase()){
		return start;
	}else{ //console.log(start.className);
		return findAncestorByClsName(start.parentNode,clsNm);
	}
}