根据手柄位置调整滑块的范围

Adjusting the range of a slider based on handle positions

我有一个带两个手柄的 nouislider 组件。句柄代表开始和结束日期,使用时间戳作为值。 一切都按预期工作。我只想添加一个功能,移动手柄将通过更改范围来缩放滑块。

这是我的滑块的样子。

我想要它,例如,将左手柄向右移动会增加较低的范围,以便两个手柄之间的区域占整个区域的更大百分比 space .有点像缩放效果。

我知道如何在需要时更新范围,我只是想知道是否有一些现有的公式或通用方法来计算这种东西,手柄的位置将决定范围;也许使用左手柄和最小范围之间的距离,反之亦然。

一种可能的方法是定义下限和上限,使句柄始终处于总范围的固定百分比。例如:

lh, rh := left handle and right handle values
lower, upper := lower and upper bounds of the range
tl, tr := percentages of left and right handles:

那么你要求解线性系统

lh = (1 - tl) * lower + tl * upper
rh = (1 - tr) * lower + tr * upper

其解法为:

lower = (lh * tr - rh * tl) / (tr - tl)
upper = (rh - lh + lh * tr - rh * tl) / (tr - tl)

如果你想使用 tl = 0.25tr = 0.75,你会得到:

lower = 1.5 * lh - 0.5 * rh
upper = 1.5 * rh - 0.5 * lh

然后您可以将范围限制在您的最小值和最大值。