Ползунки: тянется ближайший бегунокSliders: the nearest thumb moves
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор сужает цену или площадь ползунком: берёт пальцем или мышью кружок «от» или «до» и двигает именно его, даже когда кружки стоят рядом или на одном делении.An investor narrows the price or area with the slider: takes the «from» or «to» ring with a finger or the mouse and moves exactly that ring, even when the rings stand side by side or on the same step.
ЗадачаProblem
Когда оба кружка стояли на одном делении, они двигались только вместе: например, сдвинув «от» до правого края, развести их обратно пальцем или мышью было нельзя — диапазон схлопывался в одно деление и «Ничего не найдено». На телефоне зоны нажатия 44 px у соседних делений (шаг около 16 px) перекрываются, и касание кружка «от» рядом с «до» брало «до», который толкал «от» за собой.When both rings stood on the same step they moved only together: for example, after dragging «from» to the right end, they could not be pulled apart again with a finger or the mouse — the range collapsed into one step and showed «Nothing found». On a phone the 44 px tap zones of neighbouring steps (about 16 px apart) overlap, so touching the «from» ring next to «to» took «to», which pushed «from» along.
Как решилиHow it was solved
- Нажатие на ползунок двигает тот кружок, который ближе к пальцу или курсору, а не тот, что лежит сверху.A press on the slider moves the ring nearest to the finger or cursor, not the one that happens to lie on top.
- Если оба кружка на одном делении, решает первое движение: влево — «от», вправо — «до».If both rings are on the same step, the first move decides: left — «from», right — «to».
- Вид ползунков, зоны нажатия (кружок, 44 px на телефоне) и управление с клавиатуры — прежние. Свайп, начатый на кружке, двигает кружок, а не прокручивает страницу; в стороне от кружков страница прокручивается, как раньше.The look of the sliders, their tap zones (the ring, 44 px on a phone) and keyboard control are unchanged. A swipe that starts on a ring moves the ring rather than scrolling the page; away from the rings the page scrolls as before.
До и послеBefore and after
