0

estoy intentando hace que un range muestre una cantidad en euros con separador decimal y con un campo para escribir el numero lo mismo. En el campo escrito lo he conseguido pero con la barra del range no muestra el punto.

$("#ningresos").on({
         "focus": function(event) {
        $(event.target).select();
        },
        "keyup": function(event) {
    $(event.target).val(function(index, value) {
      return value.replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="range" id="ingresos" name="amountRange" min="0" max="35000" value="0" step="500" oninput="this.form.amountInput.value=this.value" />
        <input type="number" class="precio" id="ningresos"name="amountInput" min="0" max="35000"  value="0" oninput="this.form.amountRange.value=this.value" />

    </form>

2

1 respuesta 1

0

Que te parece si usamos el evento change pero del range para ejecutar el cambio, creo que puede funcionar de esta manera ya que desde aqui se encadena la reacción, en el otro sentido creo que seria prudente usar un trigger.

$("#ingresos").on({
         "change": function(event) {
          var value_in = $("#ningresos").val();
          value_in = value_in.replace(/\D/g, "")
            .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
          $("#ningresos").val(value_in);
        }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="range" id="ingresos" name="amountRange" min="0" max="35000" value="0" step="500" oninput="this.form.amountInput.value=this.value" />
        <input type="number" class="precio" id="ningresos"name="amountInput" min="0" max="35000"  value="0" oninput="this.form.amountRange.value=this.value" />

    </form>

En el caso de que desees usar tu codigo agregarle el trigger debes, ya que este accionara el evento de tu otro input.

$("#ingresos").on({
  "change": function(event) {
      $("#ningresos").trigger("keyup");
    }
});

$("#ningresos").on({
         "focus": function(event) {
        $(event.target).select();
        },
        "keyup": function(event) {
    $(event.target).val(function(index, value) {
      return value.replace(/\D/g, "")
        .replace(/\B(?=(\d{3})+(?!\d)\.?)/g, ".");
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
    <input type="range" id="ingresos" name="amountRange" min="0" max="35000" value="0" step="500" oninput="this.form.amountInput.value=this.value" />
        <input type="number" class="precio" id="ningresos"name="amountInput" min="0" max="35000"  value="0" oninput="this.form.amountRange.value=this.value" />

    </form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.