Регулировка диапазона ползунка в зависимости от положения ручки

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

Затем вы можете ограничить диапазон минимальными и максимальными значениями.