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.