jQuery UI 슬라이더, 시간 (범위는 timeline.js가 아님), 고정 폭

Question

슬라이더 내에 포함 할 수있는 물리적 인 것보다 더 많은 년이 있으면 어떻게 될까요? 고정 너비로 ​​슬라이더를 연속으로 만드시겠습니까? 예 용

:

슬라이더

폭이

년 수용해야 600 PX는 (하나 해 슬라이더의 각 마크) 그러나

1백년 (1900년에서 2000년까지) 인 마크의 상단에있는 년을 작성하고 .. 그것이 내가에만 600 픽셀 30 년을 수용 할 수있는 좋은 보이게하기 위해 inorder를

는

1 화면 : 슬라이더가 표시됩니다 1900에서 1930 사이

거기에 어떤 방법으로 내가 슬라이더의 끝에 도달 할 때 슬라이더에 표시를 계속 이동할 수 있습니다. 즉, 슬라이더 핸들이 1925에 도달하면 슬라이더가 왼쪽으로 이동하고 다른 10 년이 슬라이더 표시에 추가됩니다

내가 1925에 핸들을 이동할 때

슬라이더가 표시됩니다 1,910 - 내가 전에 슬라이더 UI에 광범위하게 일한

1940 ... 그래서 내가 동적 슬라이더의 범위를 변경할 수 있음을 알고 있지만, 나는 "약간"파괴적인 경험보다 지속적인 슬라이딩 경험을 더 많이 생각하고있었습니다. 난 어떤 의미를 만들었

희망 ... 내가 사용할 준비가 만든 타임 라인 슬라이더가 알고 있지만 어떤 도움이 감사

내가 원하는 모든 것을 .. 따라서이 질문을 .. 필요가 없습니다.

감사

Answer 1

당신이 this 같은 것을하지 않으려는 이유는 무엇입니까?
슬라이드 슬라이더 연도를 드래그 할 때도 마찬가지입니다.
HTML :

<div id="yearsHolder" style="height: 20px !important; overflow-x: hidden; position: relative;"></div> 
<div id="slider" style="width: 200px;"></div> 
<div id="amount"></div> 

자바 스크립트 (주는 slide 이벤트) : 당신은 슬라이더 근처에 현재 연도를 표시 yearsPerText = 1을 설정할 수 있습니다

var yearTextWidth = 50; 
var yearsPerText = 5;// every 5 years appears text 
$(function() { 
    $("#slider").slider({ 
     min: 1900, 
     max: 2000, 
     step: 1, 
     disabled: false, 
     animate: true, 
     orientation: "horizontal", 
     range: false, 
     value: 1900, 
     create: function(event, ui) { 
      var slider = $(this); 
      var value = slider.slider("value"); 
      $("#amount").html(value); 
      var sliderWidth = slider.width(); 
      var yearTextsLength = Math.floor(sliderWidth/yearTextWidth);// left or equal 
      var yearsHolder = $("#yearsHolder"); 
      yearsHolder.css("width", (sliderWidth + yearTextWidth) + "px !important"); 
      var min = $(this).slider("option", "min"); 
      var max = $(this).slider("option", "max"); 
      var currentYear = min; 
      var yearHolder; 
      while (currentYear <= max) { 
       yearHolder = $("<div></div>"); 
       yearHolder.css("text-align", "left"); 
       yearHolder.css("position", "absolute"); 
       yearHolder.css("left", (((currentYear - min)/yearsPerText) * yearTextWidth) + "px"); 
       yearHolder.css("width", yearTextWidth + "px !important"); 
       yearHolder.html(currentYear); 
       yearsHolder.append(yearHolder); 
       currentYear += yearsPerText; 
      } 
     }, 
     slide: function(event, ui){ 
      var value = ui.value; 
      $("#amount").html(value); 
      var slider = $(this); 
      var min = slider.slider("option", "min"); 
      var max = slider.slider("option", "max"); 
      var width = slider.width(); 
      $.each($("#yearsHolder div"), function(index, element){ 
       var div = $(element); 
       var currentLeft = parseInt(div.css("left")); 
       var currentYear = parseInt(div.html()); 
       div.css("left", ((value - min) * (width/(max - min)) + ((currentYear - min) - (value - min)) * (yearTextWidth/yearsPerText)) + "px"); 
      }); 
     } 
    }); 
}); 

UPD
.