Vue

HTML

<div id="app" class="slidecontainer">
  <div class="slidecontainer__select">
    <div class="wrap-form__list">
      <div class="text-input" @click="showSelect = !showSelect">{{selectedOptionTitle}}</div>

      <transition name="fade">
        <ul class="form-list" v-show="showSelect">

          <li v-for="(item, index) in options" class="form-list__item" @click="selectItem(item)">
            <div class="relations__title">
              <span class="relations__place">{{item.title}}</span>
            </div>
          </li>
        </ul>
      </transition>
    </div>

  </div>

  <div id="slidecontainer__title">Выбрать количество смен</div>


  <input type="range" min="0" max="24" value="0" step="1" class="slider" id="myRange" v-model="quantity">
  <div class="range-box">
    <div class="range-box_l">0</div>
    <div class="range-box_r">24</div>
  </div>

  <p>Количество смен: <span id="time">{{quantity}}</span></p>

  <p v-for="(item, index) in fields"><input class="switch-price" v-model="selectedField" type="radio" :value="item">
    <label>{{item.title}}</label>
  </p>

  <div class="box-price">
    <transition name="fade">
      <div style="position: absolute;" :key="selectedField.title">{{resultTitle}} <span id="nds-no">{{result}}</span> грн.</div>
    </transition>
  </div>
</div>

CSS

body {
  padding: 50px;
}
.wrap-form__list {
  position: relative;
}
.range-box {
  display: flex;
  justify-content: space-between;
}
.text-input {
  display: flex;
  cursor: pointer;
  align-items: center;
  height: 48px;
  color: #333;
  font-family: "RobotoLight";
  font-size: 18px;
  border: 1px solid #bebebe;
  padding: 0 20px;
  border-radius: 8px;
  position: relative;
}
.text-input::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 15px;
  pointer-events: none;
  width: 24px;
  height: 12px;
  background: url("https://seok.com.ua/wp-content/uploads/i-select.png")
    0 0 / auto no-repeat;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.text-input.active::after {
  -webkit-transform: rotate(180deg) translateY(50%);
  -ms-transform: rotate(180deg) translateY(50%);
  transform: rotate(180deg) translateY(50%);
}
.form-list {
  background: #fff;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0;
  position: absolute;
  top: 34px;
  width: 100%;
  z-index: 2;
}
.form-list__item:first-child {
  border-radius: 8px 8px 0 0;
}
.form-list__item:last-child {
  border-radius: 0 0 8px 8px;
}
.form-list__item {
  display: flex;
  flex-direction: column;
  line-height: 15px;
  display: block;
  padding: 10px 10px 10px 20px;
  border-bottom: 1px solid #e9e9e9;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.form-list__item:hover {
  background: #f1f1f1;
}
#time {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #333;
  color: #fff;
  border-radius: 50px;
}
#nds,
#nds-no {
  font-size: 24px;
}
.box-price {
  position: relative;
  font-weight: bold;
  height: 30px;
}
#show,
#hide {
  position: absolute;
  top: 0;
  left: 0;
}
.slidecontainer__select {
  margin-bottom:...

Vue

new Vue({
  el: "#app",
  data: {
  	showSelect: false,
    options: [
    	{priceWithVAT: 6400, priceWithoutVAT: 5333, title: 'JCB 220' },
    	{priceWithVAT: 6400, priceWithoutVAT: 5333, title: 'JCB 330' },
    	{priceWithVAT: 7800, priceWithoutVAT: 6500, title: 'HITACHI ZAXIS 200LC' }
    ],
    selectedItem: null,
    fields: [
      { title: 'БЕЗ НДС', field: 'priceWithoutVAT', resultTitle: 'Результат без НДС:'},
      { title: 'C НДС', field: 'priceWithVAT', resultTitle: 'Результат с НДС:'}
    ],
    selectedField: null,
    quantity: 0
  },
  computed: {
  	selectedOptionTitle () {
    	return this.selectedItem?.title ?? 'Выберите экскаватор для аренды'
    },
  	result() {
    	return this.quantity * (this.selectedItem?.[this.selectedField.field] ?? 0)
    },
    resultTitle() {
    	return this.selectedField.resultTitle
    }
    
  },
  methods: {
  	selectItem(item) {
    	this.selectedItem = item
      this.showSelect = false
    }
  },
  created() {
  	this.selectedField = this.fields[0]
  }
})