Кнопка с ползунком html

[Hybrid]

Помогите пожалуйста с кодом.
Нужно, чтобы при нажатии на "radio button" выползал ползунок с "велью" от 0 до 6, а в этот момент внизу открывалась табличка с описанием и кнопка, значение в которой изменялось бы в зависимости от положения ползунка.

Сейчас у меня просто ползунок не привязанный и статичная стоимость в табличке и кнопке.

<form action="" method="post" class="" enctype="multipart/form-data">

<div class="ipsSideBlock clearfix">
    <h3>Иммунитеты</h3>
<div class="_sbcollapsable">



        <div class="services_contant">
            <div class="services">
      
      <div class="service_block">
                <label for="radio-1" class="radio_label">
                    <input type="radio" id="radio-1" name="radio" value="check1" data-price="100" data-name="Иммунитет от бана за выход. Позволяет покинуть активный матч без автоматической блокировки">
                    <div class="images"><img src="/scripts/services/img/exit.png"></div>
                    <center><span>Иммунитет от бана за выход</span></center>
                </label>

        </div>

        <div class="service_block">
                <label for="radio-2" class="radio_label">
                    <input type="radio" id="radio-2" name="radio" value="check2" data-price="70" data-name="Иммунитет от системы последнего игрока. Позволяет капитанам выбирать вас в команду, даже если вы зашли на сервер последним игроком">
                    <div class="images"><img src="/scripts/services/img/last.png"></div>
                    <center><span>Иммунитет от системы последнего игрока</span></center>
                </label>
        </div>

        <div class="service_block">
                <label for="radio-3" class="radio_label">
                    <input type="radio" id="radio-3" name="radio" value="check3" data-price="150" data-name="Оба иммунитета сразу:<br>-От бана за выход.<br>Позволяет покинуть активный матч без автоматической блокировки за выход<br>-От системы последнего игрока. Позволяет капитанам выбирать вас в команду, даже если вы зашли на сервер последним игроком">
                    <div class="images"><img src="/scripts/services/img/oba.png"></div>
                    <center><span>Оба иммунитета сразу</span></center>
                </label>
</div>
        
            </div>
            
                

<style>
.slidecontainer {
    width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
    -webkit-appearance: none;  /* Override default CSS styles */
    appearance: none;
    width: 100%; /* Full-width */
    height: 25px; /* Specified height */
    background: #d3d3d3; /* Grey background */
    outline: none; /* Remove outline */
    opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
    -webkit-transition: .2s; /* 0.2 seconds transition on hover */
    transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
    opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Blue background */
    cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
    width: 25px; /* Set a specific slider handle width */
    height: 25px; /* Slider handle height */
    background: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}
</style>
<div class="slidecontainer">
<input type="range" min="0" max="6" value="0" class="slider" id="myRange" onchange="document.getElementById('rangeValue').innerHTML = this.value;">
<datalist id="rangeList">
<option value="1" label="1 месяц">
</option><option value="2" label="2 месяца">
</option><option value="3" label="3 месяца">
</option><option value="4" label="4 месяца">
</option><option value="5" label="5 месяцев">
</option><option value="6" label="6 месяцев">
</option></datalist>
<span id="rangeValue">1</span>
</div>
        </div>
    </div>
</div>


<div class="total" style="display: block;">
    Ваш текущий выбор:
    <div class="name_services">Иммунитет от системы последнего игрока. Позволяет капитанам выбирать вас в команду, даже если вы зашли на сервер последним игроком</div>
    <br>
    Стоимость:
    <div class="price_services">70 рублей</div>
</div>
<div class=" services clearfix">
    <div class="forma_button clearfix">
        <input type="hidden" name="member_id" value="5213" required="required">
        <input class="request_unban send" style="" type="submit" value="Оплатить с баланса 70 рублей">
    </div>
</div>
                </form>

 

[zagon]

не че не понял, что необходимо сделать ?

 

[Hybrid]

не че не понял, что необходимо сделать ?

Три кнопки на картинке. Чтобы при нажатии на любую вылезал ползунок, тот, что на картинке, где велью от 1 до 6 и кнопка, в которой будет меняться сумма, в зависимости от велью.

 

[morning_cat]

Ну без js этого не добиться, а так проще всего копнуть в сторону реакта/вью/чего-то на подобии.