O primei passo é setar o valor do intervalo dos sliders. Para isso utilizaremos o exemplo do próprio Jquery UI.
Basta setar o max
do slider como o tamanho do array
- 1, como no exemplo abaixo:
var arrayCPU = [2, 4, 8, 16, 32];
$("#sliderCPU").slider({
value: 0,
min: 0,
max: arrayCPU.length - 1
});
O próximo passo é utilizar o evento .slide() para obtermos o momento em que o o slider for alterado, conforme no exemplo abaixo:
$("#sliderCPU").slider({
value: 0, //valor padrão
min: 0,
max: arrayCPU.length - 1,
slide: function(event, ui) {
console.log(ui)
}
});
Agora, o passo final é interligar todos os sliders. Para fazer isso eu criei uma função chamada atualizaSliders()
para atualizar todos os sliders.
Para atualizarmos os valores, basta utilizar o método value com a posição do array
que será alterado.
Depois disso tudo, basta juntarmos tudo junto, conforme o código abaixo:
$(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>
Veja o exemplo no JSFiddle.