jQueryUI滑块，使用时间作为范围（而不是timeline.js），固定宽度

如果我的年数超过了在滑块中实际可能包含的年数，并且使其看起来很漂亮，会发生什么？有没有办法使滑块在固定宽度上连续

例如：

滑块的宽度为600像素

需要调整的年份为100年（1900-2000）（滑块上的每个标记为一年）

然而，为了把年份写在标记上，让它看起来更漂亮，我只能在600像素中容纳30年

第一屏：滑块将显示1900-1930

当我到达滑块末端时，是否有任何方法可以继续移动滑块上的标记，即当滑块手柄达到1925时，滑块向左移动，滑块标记再加上10年

当我把把手移到1925年

滑块将显示1910-1940

我以前曾广泛使用过滑块ui，因此我知道我可以动态更改滑块的范围，但我更多地考虑的是连续滑动体验，而不是“轻微”破坏性体验

希望我有点道理。。。我知道有现成的时间轴滑块，但他们没有我想要的一切。。因此，这个问题

感谢您的帮助

---

谢谢你为什么不想要这样的东西 拖动滑块时，滑块也会滑动。
HTML:

UPD

---

您可以将

yearsPerText=1

设置为在滑块附近显示当前年份。

我建议不要使用“滚动滑块”：很难使额外的滚动正确，这样它就不会变慢，也不会拍摄过头。相反，只显示最左边/最右边的选项和句柄上方/内部的当前值如何？我已经做了后者，它的工作很好。谢谢大家会记住这一点，一旦我有了一个工作的原型…嗯。。。我的变速器坏了？

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

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