jQuery UI Slider và xử lý-sửa đổi

Question

Tôi sử dụng thanh trượt jQueryUI chuẩn và muốn thay đổi giao diện của tay cầm. Tôi đã thay đổi CSS thành

.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 40px; height: 10px; cursor: default; border: 0; background-color: #c6c7c8; } 
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; } 

.ui-slider-horizontal { height: 10px; border: 0; background-color: #eceded; } 
.ui-slider-horizontal .ui-slider-handle { top: 0; margin-left: 0; } 
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } 
.ui-slider-horizontal .ui-slider-range-min { left: 0; } 
.ui-slider-horizontal .ui-slider-range-max { right: 0; } 

Tôi đã làm như vậy, để có tay cầm ngồi trong "thanh trượt". Nhưng nếu tay cầm được di chuyển đến vị trí xa bên phải, nó nằm ngay bên ngoài làn đường của nó. Tất nhiên tôi có thể đặt margin của trái là .ui-slider-handle thành -20px. Nhưng sau đó trên cả hai đầu nó chồng lên làn của nó.

Có phải làm điều gì đó với ui-slider-range-max không? Nhưng khi kiểm tra thanh trượt qua Firebug, lớp CSS này không được sử dụng ở bất kỳ đâu.

Answer 1

Lớp ui-slider-range-max được cấp cho phần phạm vi của thanh trượt có điểm cố định tối đa. Như thế này: http://jqueryui.com/demos/slider/#rangemax

Nếu bạn không thấy rằng lớp trong Firebug thì có lẽ bạn không sử dụng mà loại trượt

Tôi nghĩ rằng những gì bạn đang hỏi là làm thế nào để có lợi thế cạnh dừng lại của tay cầm tại cạnh trái của "thanh trượt" và cạnh phải của tay cầm không đi qua cạnh phải của "thanh trượt". Tức là: tay cầm ngồi trong thanh trượt

Nếu vậy, bạn có thể làm cho tay cầm xuất hiện ở trong "thanh trượt" bằng cách trước tiên xóa nền và mọi thứ khác có thể nhìn thấy từ thanh trượt ui.

dụ:

.ui-slider-horizontal { height: 10px; border: 0; background: none } 

Sau đó quấn thanh trượt bên trong một div container với nền của bạn. Các div container có thể được xem như là "trượt-lane" và bạn có thể cung cấp cho nó padding yêu cầu để xử lý dường như sẽ ở trong làn đường trượt.

dụ:

.ui-slider-container { background-color: #eceded; padding: 0 0.6em;} 

cũng reset tay cầm margin-left lại những gì nó là nếu bạn có đệm ở bên trái và phải trong div container, nếu không chỉ cần sử dụng đệm ở bên phải.