Как лучше сделать такой блок?

Question

Как лучше сделать такой блок, с помощью <input type="radio">, или есть какой-то плагин?

Answer 1

Если такая полоска одна - можно и повозиться на CSS ( справочник селекторов )

.bar {
  position: relative;
  width: 90%;
  height: 12px;
  margin-top: 30px;  
  
  background-color: #333;
  border-radius: 50px;
}

.bar .fill {
  transition: 0.3s;
  
  width: 0;
  height: 100%;
  background-color: #2a2;
  border-radius: 50px;
}

.bar label {
  position: absolute;
  display: block;
  
  top: -2px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  
  border: 1px solid #555;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
}

.bar label:hover { background-color: #090; }

[for="x-100"]   { left: calc(5% - 8px); }
[for="x-300"]   { left: calc(20% - 8px); }
[for="x-500"]   { left: calc(35% - 8px); }
[for="x-1000"]  { left: calc(50% - 8px); }
[for="x-2500"]  { left: calc(65% - 8px); }
[for="x-5000"]  { left: calc(80% - 8px); }
[for="x-10000"] { left: calc(95% - 8px); }

#x-100:checked   ~ .bar .fill { width: 5% }
#x-300:checked   ~ .bar .fill { width: 20% }
#x-500:checked   ~ .bar .fill { width: 35% }
#x-1000:checked  ~ .bar .fill { width: 50% }
#x-2500:checked  ~ .bar .fill { width: 65% }
#x-5000:checked  ~ .bar .fill { width: 80% }
#x-10000:checked ~ .bar .fill { width: 95% }

#x-100:checked   ~ .bar [for="x-100"],
#x-300:checked   ~ .bar [for="x-300"],
#x-500:checked   ~ .bar [for="x-500"],
#x-1000:checked  ~ .bar [for="x-1000"],
#x-2500:checked  ~ .bar [for="x-2500"],
#x-5000:checked  ~ .bar [for="x-5000"],
#x-10000:checked ~ .bar [for="x-10000"] { background-color: #fe2; }

<input type="radio" name="bubu" id="x-100">
<input type="radio" name="bubu" id="x-300">
<input type="radio" name="bubu" id="x-500">
<input type="radio" name="bubu" id="x-1000">
<input type="radio" name="bubu" id="x-2500">
<input type="radio" name="bubu" id="x-5000">
<input type="radio" name="bubu" id="x-10000">
// display: none;

<div class="bar">
  <div class="fill"></div>
  
  <label for="x-100"></label>
  <label for="x-300"></label>
  <label for="x-500"></label>
  <label for="x-1000"></label>
  <label for="x-2500"></label>
  <label for="x-5000"></label>
  <label for="x-10000"></label>
</div>

Answer 2

Вот такой вариант с использованием jQuery

$('.range').on('click', '.dots', function(){
  let parent = $(this).closest('.item'),
      val = parent.attr('data-value');
  if(!parent.hasClass('--selected')) {
    parent.closest('.range').find('.item.--selected').removeClass('--selected');
    parent.addClass('--selected');
    bgWidth();
  }
});

function bgWidth() {
  let selected = $('.range').find('.item.--selected');
  if(selected.length === 1) {
    let width = selected.find('.dots').position().left + (selected.find('.dots').width() / 2);
    $('.range').find('.--bg').css('width', width+'px');
  } else {
    $('.range').find('.item').eq(0).addClass('--selected');
    bgWidth();
  }
} bgWidth();

$(window).resize(bgWidth);

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background: #20232c;
  margin: 0;
}

.range {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 90vw;
  height: 10px;
  background: #373942;
  border-radius: 10px;
  padding: 0 10px;
  position: relative;
  box-sizing: border-box;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 10px;
  cursor: pointer;
  z-index: 2;
}

.item:first-child {
  width: 12px;
}

.item.--selected {
  z-index: 3;
}

.item .dots {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 100%;
  background: #fff;
  position: relative;
  cursor: pointer;
}

.item .dots .-price {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  position: absolute;
  bottom: calc(100% + 20px);
}

.item .dots .-icon {
  display: block;
  width: 50px;
  height: 50px;
  background: url('https://i.imgur.com/4pd93p7.png') no-repeat 0 0 / 200% 200%;
  position: absolute;
}

.item[data-value="4"] .dots .-icon {
  background-position: top left;
}

.item[data-value="5"] .dots .-icon {
  background-position: top right;
}

.item[data-value="6"] .dots .-icon {
  background-position: bottom left;
}

.item[data-value="7"] .dots .-icon {
  background-position: bottom right;
}

.item .dots .-tooltip {
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background: #317a17;
  padding: 5px;
  border-radius: 10px;
  border: 2px solid #3c8123;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 25px);
  transform: translateX(-50%);
  box-sizing: border-box;
}

.item .dots .-tooltip::before,
.item .dots .-tooltip::after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.item .dots .-tooltip::before {
  border-top-color: #317a17;
  top: 100%;
  z-index: 2;
}

.item .dots .-tooltip::after {
  border-top-color: #3c8123;
  top: calc(100% + 2px);
  z-index: 1;
}

.item.--selected .dots .-tooltip {
  display: inline-flex;
}

.item:nth-child(7) .dots .-tooltip {
  left: auto;
  right: -12px;
  transform: translateX(0);
}

.item:nth-child(7) .dots .-tooltip::before,
.item:nth-child(7) .dots .-tooltip::after {
  left: auto;
  right: 0;
  transform: translateX(-25%);
}

.item .dots .-tooltip .-icon {
  flex: 1 0 auto;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 100%;
  background-color: #3ea309;
  position: relative;
}

.item .dots .-tooltip .-des {
  display: block;
  min-width: 120px;
  font-weight: bold;
  color: #fff;
}

.--bg {
  display: block;
  width: 16px;
  height: 10px;
  border-radius: 9px 0 0 9px;
  background: #55c12f;
  transition: width .1s linear;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="range">
  <div class="item --selected" data-value="1">
    <div class="dots">
      <div class="-price">100₽</div>
    </div>
  </div>
  <div class="item" data-value="2">
    <div class="dots">
      <div class="-price">300₽</div>
    </div>
  </div>
  <div class="item" data-value="3">
    <div class="dots">
      <div class="-price">500₽</div>
    </div>
  </div>
  <div class="item" data-value="4">
    <div class="dots">
      <div class="-price">1000₽</div>
      <div class="-icon"></div>
      <div class="-tooltip">
        <div class="-icon"></div>
        <div class="-des">+15 фриспинов за пополнение!</div>
      </div>
    </div>
  </div>
  <div class="item" data-value="5">
    <div class="dots">
      <div class="-price">2500₽</div>
      <div class="-icon"></div>
      <div class="-tooltip">
        <div class="-icon"></div>
        <div class="-des">+25 фриспинов за пополнение!</div>
      </div>
    </div>
  </div>
  <div class="item" data-value="6">
    <div class="dots">
      <div class="-price">5000₽</div>
      <div class="-icon"></div>
      <div class="-tooltip">
        <div class="-icon"></div>
        <div class="-des">+50 фриспинов за пополнение!</div>
      </div>
    </div>
  </div>
  <div class="item" data-value="7">
    <div class="dots">
      <div class="-price">10000₽</div>
      <div class="-icon"></div>
      <div class="-tooltip">
        <div class="-icon"></div>
        <div class="-des">+100 фриспинов за пополнение!</div>
      </div>
    </div>
  </div>
  <div class="--bg"></div>
</div>

Answer 3

Вот вам пример кода на чистом js и бутстрап прогресс бар, можете доработать его

https://codepen.io/nord18/pen/MWKmRpv

БЛОГ НА HUSL

Как лучше сделать такой блок?

Ответы (3 шт):