API tools faq
paste
Advertisement
mushroomh3ad

currency-input-mask

mushroomh3ad
Oct 4th, 2024 (edited)
79
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.25 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Input com Range Slider - Bootstrap 4</title>
  7.  
  8.     <!-- Bootstrap 4 CSS -->
  9.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  10.    
  11.     <style>
  12.         .slider-labels {
  13.             display: flex;
  14.             justify-content: space-between;
  15.             margin-top: 0px;
  16.         }
  17.  
  18.         .slider-container {
  19.             margin-top: 20px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.  
  25.     <div class="container mt-5">
  26.         <div class="row justify-content-center">
  27.                  
  28.             <div class="col-md-6">
  29.  
  30.                 <div class="form-group">
  31.                         <button id="voltar" name="voltar" class="btn btn-primary" type="button" onclick="portletHome()">Voltar</button>
  32.                 </div>
  33.                
  34.                 <div class="form-group">
  35.                     <div style='display: none;' id="radioDivSegmento" class="col-md-6">
  36.                         <input type="radio" id="imoveis" name="segmento" value="IMOVEIS" checked>
  37.                     </div>
  38.                 </div>
  39.  
  40.                 <div class="form-group">
  41.                     <div id="radioDiv">
  42.                         <input type="radio" id="credito" name="tipo" value="CREDITO" checked>
  43.                         <label for="credito">Valor do crédito</label>
  44.                         <input type="radio" id="parcela" name="tipo" value="PARCELA">
  45.                         <label for="parcela">Valor da parcela</label>
  46.                     </div>
  47.                 </div>
  48.  
  49.                 <!-- Campo de input para mostrar o valor -->
  50.                 <div class="form-group">
  51.                     <label for="valorBem">Selecione o Valor</label>
  52.                     <input type="number" class="form-control" id="valorBem"  min="0" max="600000" step="100" value="300000">
  53.                 </div>
  54.  
  55.                 <!-- Range Slider logo abaixo do input -->
  56.                 <div class="slider-container">
  57.                     <input type="range" class="custom-range" id="slider" min="0" max="600000" step="100" value="300000">
  58.                 </div>
  59.  
  60.                 <!-- Rótulos de mínimo e máximo para o slider -->
  61.                 <div class="slider-labels">
  62.                     <span id="min-label">R$ 0</span>
  63.                     <span id="max-label">R$ 600.000</span>
  64.                 </div>
  65.  
  66.                 <div class="form-group">
  67.                     <button type="submit" id="verOpcoes" name="verOpcoes" class="btn btn-primary">Ver opções</button>
  68.                 </div>
  69.  
  70.                 <div id="divMensagens">
  71.                     <div id="mensagem-erro" class="alert alert-danger">
  72.                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  73.                             <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>
  74.                         </svg>
  75.                         <span class="message"><strong>Ocorreu um erro ao realizar a Simulação.</span>
  76.                     </div>
  77.                 </div>
  78.  
  79.             </div>
  80.  
  81.         </div>
  82.     </div>
  83.  
  84.     <!-- jQuery e Bootstrap 4 JS -->
  85.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  86.     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
  87.  
  88.     <script>
  89.         $(document).ready(function() {
  90.             // Atualizar o valor do input conforme o slider muda
  91.             $('#slider').on('input', function() {
  92.                 $('#valorBem').val($(this).val());
  93.             });
  94.  
  95.             // Atualizar o slider conforme o input muda
  96.             $('#valorBem').on('input', function() {
  97.                 $('#slider').val($(this).val());
  98.             });
  99.         });
  100.     </script>
  101.  
  102. </body>
  103. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!