jQuery Slider - Jump between defined values and sync with other 2 sliders

Question

jQuery Slider - Jump between defined values and sync with other 2 sliders

Navigation

#1 by (1 votes)

1

I have the following need. I have to make a similar solution to Locaweb where I move 3 sliders at the same time. And they should have the steps defined according to the values of the plan.

Example: link

Firstquestionis:Howtoestablishstepsdynamicallybetweenvalues?Ihaveanarray(2,4,8,16,32)whicharethevaluesof"memory" for example. But I can not get the slider to jump to the next option.

The other question is: How do you make slides work at the same time?

$(function(){

    var arrayCPU = [2,4,8,16,32];
    var arrayRAM = [7,15,30,60,120];
    var arrayDisco = [50,100,200,400,400];

    $("#sliderCPU").slider({
        min: 2,
        max: 120
    });
    $("#sliderRAM").slider({
        min: 7,
        max: 120
    });
    $("#sliderDisco").slider({
        min: 50,
        max: 50
    });

});

javascript jquery slider

asked by anonymous 21.11.2017 / 17:33

1 answer

Return "alert" if an IF is not executed How to draw shapes with HTML5 and CSS, in the case: an arrow?

score 1 · Accepted Answer

The first step is to set the interval value of the sliders. For this we will use the Jquery UI example .

Just set the max of the slider to the size of array - 1, as in the example below:

var arrayCPU = [2, 4, 8, 16, 32];

$("#sliderCPU").slider({
  value: 0, 
  min: 0,
  max: arrayCPU.length - 1
});

The next step is to use the .slide () event to get the moment the slider for changed, as in the example below:

$("#sliderCPU").slider({
  value: 0, //valor padrão
  min: 0,
  max: arrayCPU.length - 1,
  slide: function(event, ui) {
    console.log(ui)
  }
});

Now, the final step is to interlink all the sliders. To do this I created a function called atualizaSliders() to update all the sliders.

To update the values, simply use the value method with the array position to change .

After all, just put it all together, according to the code below:

$(document).ready(function() {
  //This should have each valid amount that can be selected in the slider 
  var arrayCPU = [2, 4, 8, 16, 32];
  var arrayRAM = [7, 15, 30, 60, 120];
  var arrayDisco = [50, 100, 200, 400, 400];

  $("#sliderCPU").slider({
    value: 0, //valor padrão
    min: 0,
    max: arrayCPU.length - 1,
    slide: function(event, ui) {
      atualizaSliders(ui.value);
    }
  });

  $("#sliderRAM").slider({
    value: 0, //valor padrão
    min: 0,
    max: arrayRAM.length - 1,
    slide: function(event, ui) {
      atualizaSliders(ui.value);
    }
  });

  $("#sliderDisco").slider({
    value: 0, //valor padrão
    min: 0,
    max: arrayDisco.length - 1,
    slide: function(event, ui) {
      atualizaSliders(ui.value);
    }
  });


  function atualizaSliders(index) {
    $("#sliderDisco").slider("value", index);
    $("#disco").html('DISCO: ' + arrayDisco[index])
    $("#sliderRAM").slider("value", index);
    $("#ram").html('RAM: ' + arrayRAM[index])
    $("#sliderCPU").slider("value", index);
    $("#cpu").html('CPU: ' + arrayCPU[index])
  }

})

div {
  margin-top: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script><scriptsrc="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />


<p id="cpu">CPU: 2</p>
<div id="sliderCPU"></div>

<p id="ram">RAM: 7</p>
<div id="sliderRAM"></div>

<p id="disco">DISCO: 50</p>
<div id="sliderDisco"></div>

View the example in JSFiddle.