Как выбрать значение с помощью ползунка?

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

function AddL() {
  LitersV += 340;
  document.getElementById("Liters").innerHTML = LitersV + " " + "Liters";
}
function sliderChange(val) {
    document.getElementById('slider').innerHTML = val;
    sliderValue = val;
}

<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" oninput = "sliderChange(this.value)"></input>
<p id = "slider"> 50 </p>

var kilogramsV = 0;
var litersV = 0;
var selectedType = 'kg'; // Default selection

function addKg() {
  kilogramsV += 400;
  document.getElementById("Kilograms").innerHTML = kilogramsV + " Kilograms";
  if (selectedType === 'kg') {
    updateSliderMax(kilogramsV);
  }
}

function addL() {
  litersV += 340;
  document.getElementById("Liters").innerHTML = litersV + " Liters";
  if (selectedType === 'l') {
    updateSliderMax(litersV);
  }
}

function selectType(type) {
  selectedType = type;
  const selectionText = type === 'kg' ? 'Kilograms' : 'Liters';
  document.getElementById("ActiveSelection").innerHTML = `Active: ${selectionText}`;
  updateSliderMax(type === 'kg' ? kilogramsV : litersV);
}

function updateSliderMax(maxValue) {
  document.getElementById("SlideBar").max = maxValue;
  document.getElementById("SlideBar").value = 0; // Reset the slider value
  updateQuantity(0); // Reset the displayed quantity
}

function updateQuantity(value) {
  document.getElementById("SelectedQuantity").innerHTML = `Selected: ${value} ${selectedType.toUpperCase()}`;
}

function sell() {
  var quantity = document.getElementById("SlideBar").value;
  var money = parseInt(quantity); // Since 1 kg/l = 1 €
  document.getElementById("Money").innerHTML = '€ ' + money;
}

<div id = "KgDiv" onclick = "selectType('kg')">
  <p id = "Kilograms">Kilograms</p>
  <input type = "button" onclick = "addKg()" value = "+400Kg">
</div>
<div id = "LDiv" onclick = "selectType('l')">
  <p id = "Liters">Liters</p>
  <input type = "button" onclick = "addL()" value = "+340L">
</div>

<p id = "SelectedQuantity">Selected: 0 Kg</p>
<input type = "button" onclick = "sell()" value = "Sell">
<p id = "Money">€ 0</p>

<p id = "ActiveSelection">Active: None</p> <!-- Indicates active selection -->

<input id = "SlideBar" type = "range" min = "0" max = "100" value = "0" oninput = "updateQuantity(this.value)">