如何更新单选按钮

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>