<form class="row1">
  <div class="row mb-3">
    <div class="form-group col-md-6 col-sm-6">
      <p class="badge badge-warning">Вес (кг)</p>
      <input type="text" name="quant" class="form-control mtr" id="weight" data-step="1" value="1" data-price="15" data-min="10"/>
			<span class="plus minpl">+</span>
		<span class="minus minpl">-</span>
    </div>
    <div class="form-group col-md-6 col-sm-6">
      <p class="badge badge-warning">Объем (куб²)</p>
      <input type="text" name="quant" id="vol" value="1" class="form-control mtr" data-step="1" data-price="20" data-min="1"/>
			<span class="plus minpl">+</span>
		<span class="minus minpl">-</span>
    </div>
  </div>
  <div class="custom-control custom-checkbox row d-flex justify-content-center mb-3">
    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="load" name="quant" class="custom-control-input mtr"/>
      <label class="custom-control-label" for="load" >Нужна погрузка</label>
    </div>
 
    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="del" name="quant" class="mtr custom-control-input"/>
      <label class="custom-control-label" for="del">Доставка до места</label>
    </div>
 
    <div class="col-md-3" style="visibility: visible;">
      <input type="checkbox" id="frag" name="quant" class="custom-control-input"/>
      <label class="custom-control-label" for="frag">Хрупкий груз</label>
    </div>
  </div>
  <div class="row mb-3">
 
    <div class="form-group col-md-12">
      <label for="range">Расстояние <span class="rasstoyanie">0</span> <span>км</span></label>
      <input type="range" class="custom-range" min="50" max="5000" step="50" id="range" value="500" name="quant" value=""/>
    </div>
 
  </div>
  <div class="row col-12 mb-3"><span id="out">0.0</span> <span class="rub">₽</span></div>
  <div class="row">
      <div class="col-md-2 col-12">
        <input type="button" name="adress" id="btn" class="btn-block btn btn-primary" value="Считать"/>
      </div>
  </div>
</form>
var btn = document.querySelector('#btn'),
    out = document.querySelector('#out'),
    weight = document.querySelector('#weight'),
    vol = document.querySelector('#vol'),
    load = document.querySelector('#load'),
    del = document.querySelector('#del'),
    frag = document.querySelector('#frag'),
    range = document.querySelector('#range'),
    rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = 500;
    weight = document.querySelector('#weight'),
    vol = document.querySelector('#vol'),
    kg = 5.5,
    kub = 3500,
    km = 2;
 // range slider
    range.onchange = function(){
      var rasstoyanie = document.querySelector('.rasstoyanie').innerHTML = range.value;
    }
  // Basic function  
$('.minpl,.custom-control-input,.custom-range').click(function() {
/*Находим input*/
	$input = $(this).parent().find('.mtr');
	var qty = Number($input.val());
	/*Передаем функции подсчета, обновления*/
	if (isNaN(qty)) qty = 0;
	if ($(this).hasClass('plus')) {
		if (qty == 0) {
			qty = $input.data('min');
		} else {
			qty += $input.data('step');
		}
	} else {
		qty -= $input.data('step');
	}
    var min = $input.data('min');
    if (qty >= min)  {
        $input.val(qty).trigger('input');
    } else {
 		$input.val(0).trigger('input');
	}
	updateCalc($input);
});
function updateCalc($input) {
  if (weight.value != '' && vol.value != '') {
      if (load.checked){ 
          load.value = 1500; }
        else 
        {
          load.value = 0;
      }
      if (del.checked){ 
          del.value = 3500; }
        else 
        {
          del.value = 0;
      }
      if (frag.checked){ 
          frag.value = 2000; }
        else 
        {
          frag.value = 0;
      }
 
var sum = (weight.value * kg) + (vol.value * kub) + Number(load.value) + + Number(del.value) + Number(frag.value) + (range.value * km);
      out.innerHTML = sum;
  }else{
alert('Введите вес и объем груза');
}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-2.2.4.min.js