Hauteur et largeur du curseur jquery ui en pourcentage

Question

Je souhaite créer une interface qui réagit parfaitement à tous les périphériques et redimensionne également lorsque sa fenêtre est redimensionnée.

Cet exemple est Accès:

$('.resizer').resizable({ 
    aspectRatio: true, 
    handles: 'all' 
}); 

$("#slider").slider(); 

JSFIDDLE

La largeur et la hauteur de l'élément de coulisseau ajuster dynamiquement car ils sont à base de pourcentage. Mais la poignée reste la même! Comment puis-je autoriser le redimensionnement de la poignée avec le curseur? Est-ce que je devrai m'introduire dans le css de jquery-ui?

Answer 1

Tweak les propriétés CSS:

.ui-slider-handle { 
    top: -0.3em; 
    margin-left: -0.6em; 
} 
.ui-slider-handle 
    position: absolute; 
    z-index: 2; 
    width: 1.2em; 
    height: 0.2em; 
    cursor: default; 
} 

Si vous voulez le faire dynamiquement, vous pouvez essayer quelque chose comme:

$('.ui-slider-handle').css('width',$('.lyr2').width()*0.1); 

Modifier:

Désolé, je n'ai pas le bit de redimensionnement avant. Vous devrez mettre l'instruction de modification css() ci-dessus dans une routine de redimensionnement appropriée. Quelque chose comme ceci:

$('.resizer').resizable({ 
    aspectRatio: true, 
    handles: 'all', 
    resize: function(ev,ui) {var siz=ui.element.width()*0.1; 
    $('.ui-slider-handle').css({width:siz,height:siz}); 
    }}); 
$("#slider").slider(); 

Voir ici: JSfiddle. Pas encore parfait, car les propriétés top et margin-left doivent encore être ajustées, mais je vous laisse le soin de le faire. ;-)