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">
<label>
<input type="checkbox" name="price-check" value="400">
+400
</label>
<br>
<input type="range" min="0" max="1000" step="100" value="0" name="price-range">
</form>
<output id="sum"></output>
<select name="s" id="">
  <option value="">1</option>
  <option value="">2</option>
  <option value="">3</option>
</select>

JavaScript

var output = document.querySelector('#sum')
var priceForm = document.querySelector('.price-form')

priceForm.addEventListener('input', onInputPriceForm)

function onInputPriceForm(evt) {
 var input = evt.target;
 var form = evt.currentTarget;
 
 var rangeValue = form['price-range'].value
 var checkValue = form['price-check'].checked ? form['price-check'].value : 0;
 
 output.innerText = Number(rangeValue) + Number(checkValue)
}

$(function(){
  $(document).on('change', 'select', function() {
    console.log('hello darkness')
  });
})