Как сделать расчетный калькулятор с радиусами и ползунком?

Question

[Elliot Alderson]

Есть код. Не понимаю как настроить ползунок так, чтобы при движении ползунка влево цена () уменьшалось, а двигая вправо увеличивалась, так же при всем этом нужно добавить значение цены от цвета шарика, например красный шарик стоит 1 руб, а синий 2. При выборе нового цвета, все значение input type="text" id="text2" сбрасывается, что делать?

<input type="text" name="cennik" id="text2" class="cennik" value="0" readonly>   
    <div class="stroka1"><input type="radio" value="1" name="switch" class="radio" id="radio"> <label for="radio"></label><div class="str">Красный шарик</div></div><br>
    <div class="stroka1"><input type="radio" value="2" name="switch" class="radio" id="radio"> <label for="radio"></label><div class="str">Синий шарик</div></div><br>
    <div class="stroka1"><input type="radio" value="3" name="switch" class="radio" id="radio"> <label for="radio"></label><div class="str">Черный шарик</div></div><br>
    <div class="stroka1"><input type="radio" value="4" name="switch" class="radio" id="radio"> <label for="radio"></label><div class="str">фиолетовый шарик</div></div><br>
    <div class="stroka1"><input type="radio" value="5" name="switch" class="radio" id="radio"> <label for="radio"></label><div class="str">желтый шарик</div></div><br>
    <div class="stroka1"><input type="radio" value="6" name="switch" class="radio" id="radio"> <label for="radio"></label><div class="str">Зеленый шарик</div></div><br>
    
    <div class="chromoplan">Планируемый размер</div>  
        <input type="range" min="0" max="1000" id="line" value="0" list="rangeList1" step="10">
        <datalist id="rangeList1">
            <option value="0" label="0" >
            <option value="50" label="50" >
            <option value="100" label="100" >
        </datalist>
    </div>
</div>

    
    <script>
    
    const text = document.getElementById("text2");

let radios = [...document.querySelectorAll("input[type=radio]")];
radios.forEach(radio => {
  radio.onchange = () => {
     text.value = + radio.value;
  }
});
        
var mh1 = document.getElementById('radio')
let defaultVal = document.getElementById('text2').value


document.getElementById('line').addEventListener('input', function(e) {
  document.getElementById('text2').value = Number(defaultVal) + Number(e.target.value) + Number(text.value)
})
    </script>

Comments

[Сергей delphinpro]

Выбирайте теги к вопросам вдумчиво.
Это чисто javascript задача. html и css здесь рядом не валялись.

Answer 1

[Максим Тимофеев]

<input type="range" min="0" max="100" step="1" onchange="mymagic(this.value)">

где-то в далекой-далекой части body или в файле отдельном:

function mymagic(v){
    console.log(v);
}

Comments

[Сергей delphinpro]

не поймет =(
вопрос примитивный, но он задан. Значит нужен либо готовый код, либо детальное объяснение.

[Максим Тимофеев]

Сергей delphinpro, значит не судьба :)