Процент высоты и ширины jquery ui slider

Question

Я хочу создать интерфейс, который легко реагирует на все устройства, а также изменяет размер, когда его окно будет изменено.

Этот пример получает там:

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

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

JSFIDDLE

Ширина и высота элемента ползунка регулировки динамически, поскольку они основаны в процентах. Но ручка остается прежней! Как разрешить ручке изменять размер с помощью ползунка? Нужно ли мне корниться в css jquery-ui?

Answer 1

подправить 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; 
} 

Если вы хотите сделать это динамически, вы можете попробовать что-то вроде:

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

Edit:

К сожалению, я не получил бит изменения размера раньше. Вам нужно будет поместить вышеуказанный css() заявление об изменении каким-либо образом в подходящую процедуру изменения размера. Что-то вроде этого:

$('.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(); 

Смотрите здесь: JSfiddle. Пока еще не идеальны, поскольку свойства top и margin-left еще нужно отрегулировать, но я оставлю это вам. ;-)