0

如果我的年数超过了在滑块中包含的物理可能的年数，但让它看起来很漂亮，有什么方法可以使滑块在固定宽度上连续？

例如：

滑块的宽度为 600 像素

需要容纳的年数是100年（1900-2000年）（滑块上的每个标记是一年）

然而，为了在标记上写下年份并让它看起来不错，我只能在 600 像素中容纳 30 年。

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

有什么方法可以让我在到达滑块末端时继续移动滑块上的标记，即当滑块手柄到达 1925 年时，滑块向左移动，滑块标记又增加了 10 年

当我把手柄移到 1925

滑块将显示 1910 - 1940 ...

我之前曾与滑块 ui 进行过广泛的合作，所以我确实知道我可以动态更改滑块的范围，但我更多地考虑的是一种连续的滑动体验，而不是一种“轻微”的破坏性体验。

希望我有一些意义......我知道有现成的时间线滑块可用，但他们没有我想要的一切......因此这个问题......

任何帮助表示赞赏。

谢谢

4

1 回答 1

0

为什么你不想要这样的东西？
当您拖动滑块时，也会滑动。
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在滑块附近显示当前年份。

于 2013-08-07T08:53:48.297 回答