0

estoy intentando crear 2 sliders que al desplazarlos vayan operando con los valores del momento y me muestre a su vez el resultado. Pongo el código para mostrar el caso:

    <div id="slider_1" class="slider"></div><input id="slider_1_val
    </input> EUROS
    <div id="slider_2" class= "slider"></div> 
    <input type="text" min="30" max="90"  step="30"></input> DIAS
    Resultado:<input id="amount"></input>   



var weightSliderValue = 0;
var exerciseSliderValue = 0; 

function changeValue(){
    var currentSliderValue = (weightSliderValue -
    (weightSliderValue * exerciseSliderValue));

    $( "#slider_1_val" ).val( weightSliderValue );
    $( "#slider_2_val" ).val( exerciseSliderValue );  
    $( "#amount" ).val( currentSliderValue );


}

$( "#slider_1" ).slider({ 
  min: 1000,
  max: 5000,
  step: 100,
  slide: function( event, ui ) {
      weightSliderValue = ui.value;
      changeValue();
  }
});

$( "#slider_2" ).slider({ 
  min: 0.03,
  max: 0.09,
  step: 0.03,
  slide: function( event, ui ) {         
      exerciseSliderValue = ui.value;
      changeValue();
  }
}); 

El resultado me devuelve lo que quiero, pero el problema que tengo es que para los valores del segundo slider quiero que a medida que muevo el slider se me muestren otros valores diferentes a los que uso para operar (en este caso 0.03 - 0.06 - 0.09 respectivamente) y no sé cómo hacerlo

1
  • Ahí edite la respuesta, pegale una mirada aver si ahora si es lo que necesitas! Commented el 21 may. 2018 a las 14:51

1 respuesta 1

1

Si no interprete mal tu problema, se da por lo siguiente;

vos en la siguiente linea:

$("#slider_2_val").val( exerciseSliderValue );

Asignas el .val() a un objeto de id="slider_2_val"

Y dentro de tu html, no existe tal id.

Bastaría con asignarle el id a cualquiera de tus input y verías el resultado que esperas

<input type="text" min="30" max="90"  step="30" id="slider_2_val">DIAS

Espero ese sea tu problema, sino intentá aclararlo un poco más!

Saludos

EDIT

Para lograr lo que necesitas,bastaría con realizar el cálculo o el condicional necesario para llegar al dato que queres mostrar, por ejemplo, podrías usar un switch;

  $( "#slider_2" ).slider({ 
  min: 0.03,
  max: 0.09,
  step: 0.03,
  slide: function( event, ui ) {         

    switch(ui.value)
    {
      case 0.03: exerciseSliderValue = 30; break;
      case 0.06: exerciseSliderValue = 60; break;
      case 0.09: exerciseSliderValue = 90; break;
      default: exerciseSliderValue = 0; break;
    }


    changeValue();
  }

En este caso, cuando el resultado sea 0.03, exerciseSliderValue valdrá 30, osea que en tu input mostrarías 30

Otra opción es definirlo mediante un cálculo, por ejemplo

  $( "#slider_2" ).slider({ 
  min: 0.03,
  max: 0.09,
  step: 0.03,
  slide: function( event, ui ) {         

   exerciseSliderValue = ui.value*1000;

    changeValue();
  }
  }); </script>

Aquí llegarías al mismo resultado que en el ejemplo de arriba, pero en base a tu problema, será el método que elijas para definir el valor, como existen estos 2 ejemplos, existirán también miles mas!

Espero que ahora si tu duda haya quedado clara!

2
  • El problema no es ese, si hiciera lo que me estás recomendando, me aparecería en el input los valores 0.03 - 0.06 y 0.09 que son los que genero en la función: $( "#slider_2" ).slider({ min: 0.03, max: 0.09, step: 0.03, slide: function( event, ui ) { exerciseSliderValue = ui.value; changeValue(); } }); Pero en mi caso lo que necesito, es que en ese input me aparezcan otros valores diferentes por ejemplo 50 60 y 70
    – miaweb
    Commented el 21 may. 2018 a las 6:26
  • @miaweb ahí edité la respuesta para que puedas hacer lo que necesitas! Commented el 21 may. 2018 a las 14:50

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.