jQuery UI 슬라이더 고정 값

Question

최대 금액 인 & 사이의 모든 숫자가 아닌 jQuery 슬라이더에서 값을 슬라이드하도록 설정하려고합니다.

"0, 25, 50, 100, 250, 500"을 사람들이 미끄러질 수있는 유일한 양으로 원하지만 어떻게 완료했는지는 알 수 없습니다. "가치"부분에 두는 것은 아무 것도하지 않는 것처럼 보입니다.

<script type="text/javascript"> 
$(function() { 
    $("#slider-range").slider({ 
     range: true, 
     min: 0, 
     max: 500, 
     values: [100, 250], 
     slide: function(event, ui) { 
      $("#amount").val('Miles: ' + ui.values[0] + ' - ' + ui.values[1]); 
     } 
    }); 
    $("#amount").val('Miles: ' + $("#slider-range").slider("values", 0) + ' - ' + $("#slider-range").slider("values", 1)); 
}); 
</script> 

Answer 1

값 초기화 프로그램은 여러 엄지 슬라이더의 시작 위치를 제공하기위한 것입니다.

가능한 값의 배열을 제공하고 슬라이더를 변경하여 해당 배열의 범위를 매핑 한 다음 프레젠테이션 비트를 변경하여 해당 배열 요소를 읽습니다.

범위 슬라이더 : 다중 엄지 버전

$(function() { 
    var valMap = [0, 25, 50, 100, 250, 500]; 
    $("#slider-range").slider({ 
     min: 0, 
     max: valMap.length - 1, 
     values: [0, 1], 
     slide: function(event, ui) {       
      $("#amount").val('Miles: ' + valMap[ui.values[0]] + ' - ' + valMap[ui.values[1]]);     
     }  
    }); 
    $("#amount").val('Miles: ' + valMap[$("#slider-range").slider("values", 0)] + ' - ' + valMap[$("#slider-range").slider("values", 1)]); 
}); 

범위 슬라이더 : 단일 엄지 버전

---

$(function() { 
    var valMap = [0, 40, 50, 63, 90, 110, 125, 140, 160, 225, 250]; 
    $("#slider-range").slider({ 
     min: 1, 
     max: valMap.length - 1, 
     value: 0, 
     slide: function(event, ui) {       
      $("#amount").val(valMap[ui.value]);     
     }  
    }); 
    //$("#amount").val(valMap[ui.value]); 
}) 

;

최소 HTML :

<input type="text" id="amount" value="40" /> 
<div id="slider-range"></div>