/ The switch - the box around the slider / .switch { position: relative; display: inline-block; width: 60px; height: 34px; } / Hide default HTML checkbox / .switch input { opacity: 0; width: 0; height: 0; } / The slider / .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked + .slider { background-color: #2196F3; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); } / Rounded sliders / .slider.round { border-radius: 34px; } .slider.round:before { border-radius: 50%; } .slider-container { background-color: transparent; width: 30vw; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 5px; } input[type="range"] { position: relative; -webkit-appearance: none; -moz-appearance: none; display: block; width: 80%; height: 8px; background-color: #d5d5d5; border-radius: 8px; outline: none; } input[type="range"]::-webkit-slider-runnable-track { -webkit-appearance: none; height: 8px; } input[type="range"]::-moz-track { -moz-appearance: none; height: 8px; } input[type="range"]::-ms-track { appearance: none; height: 8px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; height: 20px; width: 20px; background-color: white; border-radius: 50%; cursor: pointer; margin-top: -6px; border: 3px solid rgba(0, 0, 0, 0.2); } input[type="range"]::-moz-range-thumb { -webkit-appearance: none; height: 20px; width: 20px; background-color: #3264fe; border-radius: 50%; cursor: pointer; margin-top: -6px; border: none; } input[type="range"]::-ms-thumb { appearance: none; height: 20px; width: 20px; background-color: #3264fe; border-radius: 50%; cursor: pointer; margin-top: -6px; border: none; } input[type="range"]:active::-webkit-slider-thumb { background-color: #ffffff; border: 3px solid #3264fe; } .slider-usuarios { display: flex; flex-direction: row; align-items: center; gap: 6px; } #slider-value { color: #0f7bde; text-align: center; font-family: Poppins; font-weight: 700; padding: 10px 0; border-radius: 5px; display: flex; align-items: center; justify-content: center; } .usuarios-text { color: #0f7bde; text-align: center; font-family: Poppins; font-weight: 700; } .precos-container { width: auto; height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .mensal-anual-container { display: flex; flex-direction: row; gap: 20px; align-items: center; justify-content: center; } .anual-container { display: flex; flex-direction: column; justify-content: center; align-items: center; } .desconto-text { color: #52c5ff; font-size: 14px; font-family: Poppins; } .titulo-mensal, .titulo-anual { font-family: Poppins; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; color: #9f9f9f; } .titulo-ativo { color: #0f7bde; font-weight: 600 } .valor-container { display: flex; flex-direction: column; align-items: center; margin-top: 30px } .valor-mensal-text { font-family: Poppins; color: #52c5ff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; } .preco-text { display: flex; flex-direction: row; align-items: center; margin-top: -16px; } .preco-real { font-family: Poppins; color: #000; font-size: 76px; display: flex; } .cifrao-text { font-family: Poppins; color: #abbfd2; font-size: 30px; } #parte-decimal { font-family: Poppins; color: #000; font-size: 36px; padding-top: 18px } .usuario-slider-container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 10px; } .preco-por-usuario { font-family: Poppins; color: #abbfd2; font-size: 14px; } const mySlider = document.getElementById("my-slider"); const sliderValue = document.getElementById("slider-value"); const checkbox = document.querySelector('.js-checkbox'); let precoMensalUsuario = 499 function slider() { valPercent = (mySlider.value / mySlider.max) * 100; mySlider.style.background = `linear-gradient(to right, #3264fe ${valPercent}%, #d5d5d5 ${valPercent}%)`; sliderValue.textContent = mySlider.value; let numUsuario = sliderValue.innerHTML; let precoTotal = (numUsuario * precoMensalUsuario) / 10; const parteInteira = Math.floor(precoTotal); const parteDecimal = (precoTotal - parteInteira).toFixed(2).split('.')[1] document.getElementById('parte-inteira').textContent = parteInteira; document.getElementById('parte-decimal').textContent = `,` + parteDecimal; } slider(); checkbox.addEventListener('change', function () { if (checkbox.checked) { precoMensalUsuario = (499 12 95 )/ 100; document.querySelector('.preco-por-usuario').innerHTML = `R$47,40 / usuário` document.querySelector('.titulo-mensal').classList.remove('titulo-ativo'); document.querySelector('.titulo-anual').classList.add('titulo-ativo'); slider(); } else { precoMensalUsuario = 499; document.querySelector('.preco-por-usuario').innerHTML = `R$49,90 / usuário`; document.querySelector('.titulo-anual').classList.remove('titulo-ativo'); document.querySelector('.titulo-mensal').classList.add('titulo-ativo'); slider(); } })