jQuery UI 슬라이더로 사용자 정의 범위/변수 세트

Question

jQuery UI Slider과 함께 사용할 사용자 정의 데이터 세트를 만들 수 있는지 확인하고 싶습니다. 드레스 크기가 다음과 같은 범위에있는 사이트에서 작업하고 있습니다. [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 16W, 18W, 20W]

내가 겪고있는 문제는 18 세 이후에 발생합니다.이 크기가 다소 넓은 "넓은"크기로 점프합니다. 슬라이더가 변경 될 때

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

그 함수의 마지막 인수는 텍스트 값을 변경 : 나는 16W, 18W에 추가하기 전에

, 그리고 크기에, 나는 다음과 같은 코드를 사용하여 작업 슬라이더를 생성 .

이 목록의 끝에 16W, 18W 등을 추가하는 방법을 아는 사람이 있습니까?

감사!

Answer 1

, 당신은 당신의 레이블 다른 배열을 사용할 수 있습니다 :

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]); 
    } 
}); 

이제 크기를 추가하거나 제거하려면 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); 
    } 
}); 

----- 또는 ------ 사용자 정의 크기

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); 
    } 
});​