Как я могу сделать обновление кнопок радио

Question

Кто-нибудь знает, как я могу сделать так, чтобы общее значение обновлялось в реальном времени в зависимости от того, какой переключатель выбран и значение селектора диапазона? Все, что я получаю, это Total Value: 50[object HTMLInputElement].

var drink = document.querySelector('[name="drink"]:checked');
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    
    output.innerHTML = Number(slider.value) + drink;
    slider.oninput = function() {
    output.innerHTML = Number(slider.value) + drink;
}

<div class="slidecontainer">
	  <input type="radio" class="r1" name="drink" value="50"> Cider/ Beer<br>
    <input type="radio" class="r1" checked="checked" name="drink" value="20"> Wine<br>
    <input type="radio" class="r1" name="drink" value="30"> Spirits
    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">

    <p>Total Value: <span id="demo"></span></p>
</div>

Answer 1

Попробуйте установить входное значение в качестве имени на радио.

 var drink = document.querySelector('[name="drink"]:checked').value;
 var slider = document.getElementById("myRange");
 var output = document.getElementById("demo");
 output.innerHTML = Number(slider.value) +' '+ drink;

 slider.oninput = function() {
    changeName()
 }

 function changeName(){
   drink = document.querySelector('[name="drink"]:checked').value;
   output.innerHTML = Number(slider.value) + ' ' +drink;
 }

<div class="slidecontainer">
  <input type="radio" class="r1" name="drink" value="Cider/ Beer" onchange="changeName()"> Cider/ Beer<br>
  <input type="radio" class="r1" checked="checked" name="drink" value="Wine" onchange="changeName()"> Wine<br>
  <input type="radio" class="r1" name="drink" value="Spirits" onchange="changeName()"> Spirits
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">

  <p>Total Value: <span id="demo"></span></p>
</div>