currency-input-mask2

<!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>

    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <!-- Campo de input para mostrar o valor com máscara monetária -->
                <div class="form-group">
                    <label for="inputValor">Valor:</label>
                    <input type="text" class="form-control" id="inputValor" min="0" max="600000" 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"></span>
                    <span id="max-label">Max: R$ 600.000,00</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 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>
        $(document).ready(function() {
            // Aplicar a máscara no campo de input ao carregar a página
            $('#inputValor').mask('000.000.000,00', {reverse: true});

            // Definir o valor inicial formatado corretamente
            let valorInicial = $('#slider').val();
            $('#inputValor').val(formatCurrency(valorInicial));

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

            // Atualizar o valor do input conforme o slider muda
            $('#slider').on('input', function() {
                var valorSlider = $(this).val();
                var valorFormatado = formatCurrency(valorSlider);
                $('#inputValor').val(valorFormatado);
            });

            // Quando o usuário digitar manualmente, manter o "R$" no campo
            $('#inputValor').on('blur', function() {
                console.log("valorInput: ", $(this).val());
                if ($(this).val() === "") {
                    $(this).val(formatCurrency($('#slider').val())); // Aplicar formatação correta com "R$"
                } else {
                    var 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
                        var 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
                        }
                    }
                }

            });
        });
    </script>

</body>
</html>