根据手柄位置调整滑块的范围
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.25
和 tr = 0.75
,你会得到:
lower = 1.5 * lh - 0.5 * rh
upper = 1.5 * rh - 0.5 * lh
然后您可以将范围限制在您的最小值和最大值。
我有一个带两个手柄的 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.25
和 tr = 0.75
,你会得到:
lower = 1.5 * lh - 0.5 * rh
upper = 1.5 * rh - 0.5 * lh
然后您可以将范围限制在您的最小值和最大值。