Custom Range/Variable Set với jQuery UI Slider

Question

Tôi muốn xem liệu tôi có thể tạo một tập dữ liệu tùy chỉnh để sử dụng với jQuery UI Slider hay không. Tôi đang làm việc trên một trang web có kích thước trang phục nằm trong phạm vi: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16W, 18W, 20W]

Vấn đề tôi đang nảy sinh ngay sau 18, khi nó nhảy tới các kích thước "rộng" có một chút độc đáo.

Trước khi tôi thêm vào trong 16W, 18W, và về kích thước, tôi đã tạo một thanh trượt làm việc bằng cách sử dụng đoạn mã sau:

$("#slider-size .slider").slider({ 
    min: 0, 
    max: 18, 
    step: 2, 
    slide: function(event, ui) { 
    $(".rsize").text(ui.value); 
    } 
}); 

Đối số cuối cùng trong chức năng thay đổi một giá trị văn bản khi thanh trượt được thay đổi .

Có ai biết cách thêm khoảng 16W, 18W, v.v. vào cuối danh sách này không?

Cảm ơn!

Answer 1

Đối với kích thước tùy chỉnh, bạn có thể sử dụng mảng khác cho các nhãn của bạn:

var sizes = ["0","2","4","6","8","10","12","14","16","18","16W","18W","20W"]; 
$("#slider-size .slider").slider({ 
    min: 0, 
    max: sizes.length - 1, 
    step: 1, 
    slide: function(event, ui) { 
    $(".rsize").text(sizes[ui.value]); 
    } 
}); 

Bây giờ, để thêm hoặc xóa kích cỡ, chỉ cần sửa đổi mảng sizes.

Answer 2

demo

$("#slider-size .slider").slider({ 
    min: 0, 
    max: 24, // max is 24 
    step: 2, 
    slide: function(event, ui) { 
    var s = ui.value; 
    switch(ui.value) { 
     case 20: 
     s = '16W'; 
     break; 
     case 22: 
     s = '18W'; 
     break; 
     case 24: 
     s = '12W'; 
     break; 
    } 
    $(".rsize").text(s); 
    } 
}); 

----- hoặc ------

demo

$("#slider-size .slider").slider({ 
    min: 0, 
    max: 24, // max is 24 
    step: 2, 
    slide: function(event, ui) { 
     $(".rsize").text((ui.value >18)?(ui.value-4)+'W':ui.value); 
    } 
});​