Operate with sliders

Question

Operate with sliders

Navigation

#1 by (1 votes)

0

I am trying to create 2 sliders that when moving them operate with the values of the moment and show me the result in turn. I put the code to show the case:

    <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();
  }
});

The result returns what I want, but the problem I have is that for the values of the second slider I want that as I move the slider I am shown other values than those I use to operate (in this case 0.03 - 0.06 - 0.09 respectively) and I do not know how to do it

javascript jquery slider

asked by miaweb 21.05.2018 в 00:10

source

1 answer

Show previous data of a select-Laravel Load files while scrolling in a Recycler View with retrofit

score 1 · Answer 1

If you do not misinterpret your problem, take the following:

vos on the following line:

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

You assign the .val() to an object of id="slider_2_val"

And inside your html, there is no such id.

It would be enough to assign the id to any of your input and you would see the result you expect

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

I hope that is your problem, but try to clarify it a bit more!

Greetings

EDIT

To achieve what you need, it would be enough to perform the calculation or the conditional necessary to get to the data you want to show, for example, you could use a 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();
  }

In this case, when the result is 0.03 , exerciseSliderValue will be% 30 , so in your input you would show 30

Another option is to define it using a calculation, for example

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

   exerciseSliderValue = ui.value*1000;

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

Here you would arrive at the same result as in the example above, but based on your problem, it will be the method you choose to define the value, as there are these 2 examples, there will also be thousands more!

I hope that now if your doubt is clear!