jQuery UI滑块，使用时间作为范围(而不是timeline.js)，固定宽度

Question

如果我有更多的时间比物理上可能包括在滑块中，但使它看起来很漂亮，有什么办法使滑块连续在一个固定的宽度？

例如：

滑块宽度为600 px。

需要容纳的年份为100年(1900年至2000年)(滑块上的每个标记为一年)。

然而，为了把这些年写在标记上，并使它看起来很漂亮，我只能在600 px中容纳30年。

第一个屏幕:滑块将显示1900年至1930年。

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

当我把手柄移到1925年

滑块将显示1910-1940 ..。

我曾经广泛地使用过滑块ui，所以我知道我可以动态地改变滑块的范围，但是我更多地想到的是持续的滑动体验，而不是“轻微”的破坏性体验。

希望我说得有道理..。我知道有现成的时间线滑块可用，但他们没有我想要的一切。所以这个问题..。

任何帮助都是非常感谢的。

谢谢

Answer 1

为什么你不想要像这这样的东西

当你拖拽滑块的时候，几年也会滑行。

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>  

Javascript (主要是slide事件)：

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

您可以将yearsPerText = 1设置为在滑块附近显示当前年份。