Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Range Slider com Máscara Monetária - Bootstrap 4</title>

    <!-- Bootstrap 4 CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <style>
        .slider-labels {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        .slider-container {
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <form id="formSimulacao" autocomplete="off">

        <!-- Step 1 -->
        <div class="step active" id="step1">

            <div class="container mt-5">

                <div class="row justify-content-center">

                   <div class="col-md-6">

                       <div class="form-group">
                               <button id="voltar" name="voltar" class="btn btn-primary" type="button" onclick="portletHome()">Voltar</button>
                       </div>

                       <div class="form-group">
                           <div style='display: none;' id="radioDivSegmento" class="col-md-6">
                               <input type="radio" id="imoveis" name="segmento" value="IMOVEIS" checked>
                           </div>
                       </div>

                       <h3>Escolha a forma desejada para simular, pelo valor da carta de cr&eacute;dito ou da parcela.</h3>

                       <div class="form-group">
                           <div id="radioDiv">
                               <input type="radio" id="credito" name="tipo" value="CREDITO" checked>
                               <label for="credito">Valor do cr&eacute;dito</label>
                               <input type="radio" id="parcela" name="tipo" value="PARCELA">
                               <label for="parcela">Valor da parcela</label>
                           </div>
                       </div>

                        <!-- Campo de input para mostrar o valor com máscara monetária -->
                        <div class="form-group">
                            <input type="text" class="form-control" id="valorBem" value="300000">
                        </div>

                        <!-- Range Slider logo abaixo do input -->
                        <div class="slider-container">
                            <input type="range" class="custom-range" id="slider" min="0" max="600000" step="1000" value="300000">
                        </div>

                        <!-- Rótulos de mínimo e máximo para o slider -->
                        <div class="slider-labels">
                            <span id="min-label">R$ 0</span>
                            <span id="max-label">R$ 600.000,00</span>
                        </div>

                        <p>Digite ou arraste o seletor acima para ajustar o valor.</p>

                       <div class="form-group">
                           <button type="submit" id="verOpcoes" name="verOpcoes" class="btn btn-primary">Ver op&ccedil;&otilde;es</button>
                       </div>

                       <div id="divMensagens">
                           <div style='display: none;' id="mensagem-erro" class="alert alert-danger">
                               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                   <path d="M12 20C16.4187 20 20 16.4187 20 12C20 7.58125 16.4187 4 12 4C7.58125 4 4 7.58125 4 12C4 16.4187 7.58125 20 12 20ZM12 8C12.4156 8 12.75 8.33437 12.75 8.75V12.25C12.75 12.6656 12.4156 13 12 13C11.5844 13 11.25 12.6656 11.25 12.25V8.75C11.25 8.33437 11.5844 8 12 8ZM13 15C13 15.5531 12.5531 16 12 16C11.4469 16 11 15.5531 11 15C11 14.4469 11.4469 14 12 14C12.5531 14 13 14.4469 13 15Z" fill="#DA1414"></path>
                               </svg>
                               <span class="message"><strong>Ocorreu um erro ao realizar a Simula&ccedil;&atilde;o.</span>
                           </div>
                       </div>

                   </div>

               </div>

            </div>

        </div>

    </form>

    <!-- jQuery e jQuery Mask Plugin -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

    <script type="text/javascript">
        let $portletValorMinimoValorCredito = 0;
        let $portletValorMaximoValorCredito = 600000;
        let $portletValorInicialValorCredito = $portletValorMaximoValorCredito / 2;
        let $portletValorMinimoValorParcela = 0;
        let $portletValorMaximoValorParcela = 6000;
        let $portletValorInicialValorParcela = $portletValorMaximoValorParcela / 2;

        // Aplicar a máscara no campo de input ao carregar a página
        $("#valorBem").mask('000.000.000,00', {reverse: true});

        // Definir o valor inicial formatado corretamente
        let valorInicial = 0;

        if (typeof $portletValorMaximoValorCredito != "undefined") {
            valorInicial = $portletValorMaximoValorCredito / 2;
        }

        $("#valorBem").val(formatCurrency(valorInicial));
        $("#slider").val(formatCurrency(valorInicial));

            // Adiciona um evento onchange aos radio button
        $('input[name="tipo"]').change(function() {

            let valorSelecionado = $('input[name="tipo"]:checked').val();

            if (valorSelecionado === "CREDITO") {

                $('#valorBem').val(formatCurrency($portletValorInicialValorCredito));
                $("#max-label").text(formatCurrency($portletValorMaximoValorCredito));
                $('#slider').attr('max', $portletValorMaximoValorCredito);
                $('#slider').val($portletValorInicialValorCredito);


            } else if (valorSelecionado === "PARCELA") {

                $('#valorBem').val(formatCurrency($portletValorInicialValorParcela));
                $("#max-label").text(formatCurrency($portletValorMaximoValorParcela));
                $('#slider').attr('max', $portletValorMaximoValorParcela);
                $('#slider').val($portletValorInicialValorParcela);

            }

        });

        // Logica do Slider

        // Atualizar o valor do input conforme o slider muda
        $("#slider").on('input', function() {

            let valorSlider = $(this).val();
            let valorFormatado = formatCurrency(valorSlider);
            $('#valorBem').val(valorFormatado);

        });

        // Quando o usuário digitar manualmente, manter o "R$" no campo
        $("#valorBem").on('blur', function() {

            let valorBem = limparNumero($(this).val());

            if (valorBem > $portletValorMaximoValorCredito) {

                let valorFormatado = formatCurrency($portletValorMaximoValorCredito);

                $('#valorBem').val(valorFormatado);
                $("#slider").val(limparNumero(valorFormatado)); // Atualizar o slider com o valor correto
                return;

            }

            if ($(this).val() === "") {

                $(this).val(formatCurrency($("#slider").val())); // Aplicar formatação correta com "R$"

            } else {

                let valorInput = $(this).val().replace(/\D/g, ''); // Remover todos os caracteres não numéricos

                if (valorInput) {

                    // Corrigir valor em centavos: divisível por 100 para trabalhar com reais
                    let valorNum = parseInt(valorInput) / 100;

                    if (!isNaN(valorNum)) {
                        $(this).val(formatCurrency(valorNum)); // Aplicar formatação correta com "R$"
                        $("#slider").val(valorNum); // Atualizar o slider com o valor correto
                    }

                }

            }

        });

        // Função para formatar o valor como moeda
        function formatCurrency(value) {
            return 'R$ ' + parseInt(value).toLocaleString('pt-BR', {minimumFractionDigits: 2});
        }

        function limparNumero(valor) {

            let valorFormatado = valor.substring(0, valor.length - 2);

            // Remove tudo que não seja número
            return valorFormatado.replace(/[^\d]/g, '')

        }
    </script>

</body>