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

Question

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

Example: https://www.locaweb.com.br/cloud/cloud-hosting/

The first question is: How to dynamically establish Steps between values? I have an array (2, 4, 8, 16, 32) which are the values of "memory" for example. But I can’t get the slider to skip to the next option.

The other question is: How to get the slides to be triggered 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
    });

});

Answer 1

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

Just set the max slider size as the 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 event .slide() to obtain the moment the slider is 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 connect all the sliders. To do this I created a function called atualizaSliders() to update all sliders.

To update the values, just use the method value with the position of array which will be amended.

After all this, 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>
<script src="//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>

See the example in Jsfiddle.