ASP.NET MVC3의 기간 선택 컨트롤

Question

첨부 된 이미지에서 언급 한 것과 비슷한 슬라이더를 구현하고 싶습니다.

14/09에서 24/05와 같이 날짜를 선택할 수있는 슬라이더를 원합니다. 기본적으로 14/09 to 31/dec 및 01/01 to 24/05로 여러 기간을 만드는 대신 한 번에이 기간을 선택할 수있게하고 싶습니다. 시피

는 두 슬라이더 있는데, 첫 번째는 "로부터"이며, 두 번째는, 사용자가 구간 설정을 조정하기 위해 각 슬라이더를 이동시킬 수 "를"이다.

제 3 자 컨트롤 (jquery 기반 선호)이 있으므로 비슷한 효과가 있습니까?

Answer 1

범위 옵션이 false 인 Jquery Slider를 사용할 수 있습니다. 범위 선을 가로 질러 포인터를 자유롭게 움직일 수 있고 오버레이 기간을 보여 주면 또 다른 두 개의 슬라이더를 생성하고 from과 to 선택에 따라 동적으로 숨 깁니다.

function sliderOperatingControl(controlId, rangeVal, minVal, maxVal, valuesVal, slideLogic) { 
     $(controlId).slider({ 
      range: rangeVal, 
      min: minVal, 
      max: maxVal, 
      values: valuesVal, 
      slide: slideLogic 
     }); 
    } 
$(function() { 
sliderOperatingControl("#sliderFrom", false, 1, 365, [1, 365], function (event, ui) { 
      var strDate = returnDate(ui.values[0]) + " To " + returnDate(ui.values[1]); 
      $("#periodFromToLabel").html("Range: " + strDate); 
      $("#SliderDisplay").slider("values", 0, ui.values[0]); 
      $("#SliderDisplay").slider("values", 1, ui.values[1]); 
      if (ui.values[0] > ui.values[1]) { 
       $("#SliderDisplay").slider("values", 0, ui.values[0]); 
       $("#SliderDisplay").slider("values", 1, 365); 
       $("#SliderDisplay2").slider("values", 0, 0); 
       $("#SliderDisplay2").slider("values", 1, ui.values[1]); 
       $("#SliderDisplay2").show(); 
      } 
      else { 
       $("#SliderDisplay").slider("values", 0, ui.values[0]); 
       $("#SliderDisplay").slider("values", 1, ui.values[1]); 
       $("#SliderDisplay2").hide(); 
      } 

     }); 
}); 

그래서 SliderDisplay 및 SliderDisplay2 동적에서 기반 및 선택 범위 숨겨진 또는 표시 할 수 있습니다.