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

Question

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

这是我的滑块的外观。

我想拥有它，例如，将左手柄移近右侧将增加较低的范围，以便两个手柄之间的面积占整个空间的更大百分比。有点像缩放效果。

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

Answer 1

一种可能的方法是定义下限和上限，以使手柄始终位于总范围的固定百分比处。例如：

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.25和tr = 0.75，则会得到：

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

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