0

Tengo un span que muestra valores desde un rango noUISlider, de ese span quiero tomar el valor que arroja al mover el selector y almacenarlo para usarlo en una operación matemática (multiplicar y o dividir por otro valor) y ese resultado mostrarlo en el sitio

Imagen de referencia

introducir la descripción de la imagen aquí

Se ve que hay un rango mínimo y máximo, ambos valores tendrán una conversión. Por tratarse de un plugin de WordPress, sólo tengo acceso al siguiente código generado en HTML:

<div class="price-slider price">
    <span id="price-value-min">9.350</span> 
    <span class="separator">UF </span>
    <span id="price-value-max">38.500</span>
</div>

<input type="hidden" name="price_min" id="min-value" value="9.350">
<input type="hidden" name="price_max" id="max-value" value="38.500">

Los valores del input cambian al deslizar, son esos valores los que necesito capturar

Actualmente tengo esto, pero no consigo mostrar valor alguno

jQuery(document).ready(function( $ ) {

    // $ Works! You can test it with next line if you like
    // console.log($);

    $('#price-value-min').click(function() {
        var x = $(this).val();
        // alert(x);

        // Recomiendo usar la consola en lugar de alerts
        console.log('El valor es: ' + x);
    });

});

Cabe mencionar que esos valores cambian

Agradecido.

4
  • El input que usas para deslizar es del tipo range? el 15 ene. 2018 a las 15:31
  • No te muestra valor, porque estas intentado activar con el evento "Click", un elemento no clickeable como el "span". Prueba a utilizar "change" sobre los elementos hidden. algo como : $('#min-value').change(function () { console.log($(this).val()); }); el 15 ene. 2018 a las 15:33
  • @IñigoIrigoyenErquicia así es, pero no lo puedo manipular el 15 ene. 2018 a las 15:45
  • Carlos, no estás identificando bien los elementos, en jQuery, # es para el id, y ahí tú estás poniendo el valor del atributo name. Si lo cambias por: $('#min-value').click(function() { //código y por $('#max-value').click(function() { //código debería funcionar.
    – A. Cedano
    el 15 ene. 2018 a las 15:48

1 respuesta 1

2

Captura el valor de max y min de los inputs después que cambie el input que fija el rango:

$('#id_input_con_type_range').change(function(){  // si es una clase pondrias  .nombre_de_clase en vez de #id_d_input
      var min =  $('#min-value').val(),
          max = $('#max-value').val()
      console.log('maximo:',max,'minimo:',min)

})

Nota: Si no sabes donde esta el html par el input de tipo range, click derecho sobre el elemento, inspeccionar elemento y fíjate en su id.

4
  • Se puede usar con una clase? el 15 ene. 2018 a las 15:45
  • si claro, te actualizo la respuesta, para que veas como
    – Asney
    el 15 ene. 2018 a las 15:47
  • si es lo que necesitabas recuerda marcar la respuesta como aceptada, saludos...
    – Asney
    el 15 ene. 2018 a las 15:50
  • es lo que necesitaba, muchas gracias! el 15 ene. 2018 a las 18:24

Tu Respuesta

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

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