При выборе checkbox нужно менять значение range (чтобы 1 деление range было столько сколько сам checkbox).
Хочу как
на этом сайте (раздел "Цена IT аутсорсинга в Москве").
form.price-form
.d-flex.justify-content-around.align-items-center
.d-flex.flex-column.w-100
label
input(type="range" min="0" max="100" step="400" value="0" name="price-range")
label
input(type="range" min="0" max="20" step="0" value="0" name="price-ranges")
.d-flex
label
input(type="checkbox" name="price-check" value="400")
|Удаленный
<br>
|400 руб.
label
input(type="checkbox" name="price-checkOne" value="900")
|Базовый
<br>
|900 руб.
label
input(type="checkbox" name="price-checkTwo" value="950")
|Оптимальный
<br>
|950 руб.
var output = document.querySelector('#sum')
var priceForm = document.querySelector('.price-form')
priceForm.addEventListener('input', onInputPriceForm)
priceForm.jsPrice = 0; // начальное значение
function onInputPriceForm(evt) {
var input = evt.target;
var form = evt.currentTarget;
var rangeValue = form['price-range'].value
var rangeValues = form['price-ranges'].value
var checkValue = form['price-check'].checked ? form['price-check'].value : 0;
var checkValueOne = form['price-checkOne'].checked ? form['price-checkOne'].value : 0;
var checkValueTwo = form['price-checkTwo'].checked ? form['price-checkTwo'].value : 0;
output.innerText = Number(rangeValue) + Number(checkValue) + Number(rangeValues) + Number(checkValueOne) + Number(checkValueTwo)
}
