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

高手

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

这是我的滑块的样子。 我的滑块

我想要它,例如,将左手柄移近右侧会增加下限范围,以便两个手柄之间的区域占整个空间的更大百分比。有点像缩放效果。

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

尼科·谢特勒

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

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.25and tr = 0.75,你会得到:

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

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

更改范围滑块手柄颜色(单击时)

Zurb Foundation 5.5.2范围滑块在栏上单击以将手柄推进到位置不起作用

使滑块气泡跟上左手柄

jQuery UI滑块标签-在调整大小时遵循手柄

在Angular中,如何更改primeng滑块手柄的手柄?

是否可以根据QSlider手柄的位置改变其颜色?

如何定位我的标记以始终跟随滑块手柄?

引导滑块自定义手柄

unity3d滑块的移动手柄

使用滑块手柄在图像幻灯片中拖动

无需 jQuery 即可更改滑块手柄颜色

在DOJO中的HorizontalRangeSlider中重置滑块手柄

如何避免在Window中调整手柄重叠的大小

如何用鼠标位置控制QuadraticCurve手柄位置?

将手柄放置在轨迹栏上单击的位置

Qml滑块样式,在滑块手柄前后分配不同的凹槽颜色

带手柄拖放

Prolog Json手柄

使用代码中的样式自定义Qt滑块时,手柄会脱离凹槽

在jQuery UI滑块的手柄右侧更改background-color

圆形滑块-将最小手柄设置为较高的值,反之亦然

如何为jQuery滑块的手柄值分配左边缘或右边缘而不是中心?

带有一个手柄的滑块-更新两个值

如何在不更改标准滑块形状的情况下重新着色Qslider手柄?

无论如何,是否可以获取滑块手柄的默认值?

如何在qt中实现带有圆形空心手柄的滑块

如何在ckeditor image2(enhancedimage)中删除图像大小调整手柄

将textarea调整大小手柄放在顶部

如何为UIView添加大小调整手柄?