JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<form class="price-form">
<fieldset class="price-form__types">
<legend>Тип</legend>
 <label>
<input type="radio" name="price-type" value="400" checked="checked">
Эконом
</label>
<br>
<label>
<input type="radio" name="price-type" value="900">
Базовый
</label>
<br>
<label>
<input type="radio" name="price-type" value="950">
Оптимальный
</label>
</fieldset>
<fieldset class="price-form__counts">
  <legend>Количество</legend>
  <input type="range" min="0" max="40000" step="400" value="0" name="price-range">
</fieldset>
</form>
<output id="sum"></output>

JavaScript

var output = document.querySelector('#sum')
var priceForm = document.querySelector('.price-form')
var priceRange = priceForm['price-range']
var types = priceForm.querySelector('.price-form__types')

types.addEventListener('change', onTypeChanged)
priceRange.addEventListener('input', onRangeChanged)

function onTypeChanged(evt){
  var value = Number(evt.target.value)
  var currentRangeStep = Number(priceRange.value) / Number(priceRange.step)
  priceRange.max = value * 100
  priceRange.step = value
  priceRange.value = value * currentRangeStep
  updateSum()
}

function onRangeChanged(evt) {
  updateSum()
}

function updateSum() {
	output.textContent = priceRange.value
}