How do I select a value using the slide bar?

Can someone please help me with this project I am working on? I want to select either one of the two divs (KgDiv, LDiv) by clicking it, then use the slide bar to select a value between 0 and the maximum value of the Kilograms/ Liters paragraph, then use the Sell button to convert Kg or L to € at a rate of 1 to 1. Also the quantity (kg or l) selected using the slide var should be displayed next to the slide bar.

<div id="KgDiv">
<p id="Kilograms">Kilograms</p>
<input type="button" onClick="AddKg()" value="+400Kg"></input>
</div>
<div id="LDiv">
<p id="Liters">Liters</p>
<input type="button" onClick="AddL()" value="+340L"></input>
</div>

<input type="button" onClick="Sell()" value="Sell"></input>
<p id="Money">€ 0</p>

<input id="SlideBar" type="range" min="0" max="100" value="50"></input>

var KilogramsV=0;
var LitersV=0;
function AddKg(){
KilogramsV+=400;
document.getElementById("Kilograms").innerHTML=KilogramsV +" "+ "Kilograms";
}
function AddL(){
LitersV+=340;
document.getElementById("Liters").innerHTML=LitersV +" "+ "Liters";
}

This is what I have so far.
Thanks!

I have watched yt videos but couldn’t find anything helpful.