animate - tooltip div jquery

Todos mis controles deslizantes individuales(jQuery UI) obtienen el mismo valor

Question

Quiero que cada control deslizante de la misma página tenga su propio valor cuando deslizo cada uno de ellos.

Cuando deslizo uno de ellos, el "bloque deslizante" de cada barra deslizadora funciona según lo planeado como el color de fondo condicional, pero el valor es el mismo para todos los controles deslizantes.

Aquí está mi código JS:

$(document).ready(function() {
$(''.slider'').slider({
value: 5,
min: 1,
max: 10,
step: 1,
slide: function( event, ui ) {
$( ".ui-slider-handle" ).text(ui.value);
switch(ui.value){
case 1: { $(this).css(''background'', ''darkred''); break;}
case 2: { $(this).css(''background'', ''red''); break;}
case 3: { $(this).css(''background'', ''orange''); break;}
case 4: { $(this).css(''background'', ''gold''); break;}
case 5: { $(this).css(''background'', ''yellow''); break;}
case 6: { $(this).css(''background'', ''#AAFF00''); break;}
case 7: { $(this).css(''background'', ''lime''); break;}
case 8: { $(this).css(''background'', ''cyan''); break;}
case 9: { $(this).css(''background'', ''#00AAFF''); break;}
case 10: { $(this).css(''background'', ''blue''); break;}
}
}
});
$(".ui-slider-handle").val($(''.slider'').slider( "value" ));
});

Y aquí está el código en JSfiddle: http://jsfiddle.net/Arkl1te/Wrq3H/

¿Hay alguna manera de arreglar eso? ¡Aprecio tu ayuda!

Answer 1

En función de la diapositiva, debe cambiar su selector de todos los elementos con ".ui-slider-handle" a elementos ".ui-slider-handle" en elemento que eleve el evento de diapositivas:

$(this).children( ".ui-slider-handle" ).text(ui.value);

Esa solución le permitirá usar muchos controles deslizantes sin cambiar la función para la diapositiva Ejemplo http://jsfiddle.net/cVUp3/1/

Answer 2

Necesita crear un parámetro de valor separado para cada control deslizante. Están haciendo referencia a la misma variable y, por lo tanto, el paso se aplica a ambos en función del último valor. Pruebe algo como:

valueone = 5,
valuetwo = 5,
/* ... other content ... */
$(".ui-slider-handle").val($(''#slider-1'').slider( "valueone" ));
$(".ui-slider-handle").val($(''#slider-2'').slider( "valuetwo" ));

Answer 3

No es que tengan el mismo valor, el problema es que está actualizando ambos identificadores cada vez que se produce una diapositiva. Posible solución: http://jsfiddle.net/Wrq3H/3/

//change text for current''s slider handle only
$(this).children(".ui-slider-handle").text(ui.value);