1803118 - Snap to input type=range tick marks

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, enhancement)

Description

[Tom S. (please needinfo tschuster)]

In Chrome the slider seems to snap to the defined ticks. For example on
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist#range_type it's still quite difficult to hit the tick mark.

Comment 1

[Zach Hoffman [:zrhoffman]]

Responding to Jonathan's magnet effect thoughts in bug 841942

If we have a "magnet effect", how does that interact with @step
and the clamp-to-values that @step introduces, [...] ?

Whichever's magnitude is larger, between the range of the magnet effect (in pixels?) and the @step size should probably be used for value-clamping.

[...] especially when
the @step and @list data points conflict?

Since only values that match the range's step are considered valid, any tick marks that are step mismatches should be skipped (see bug 1803303).

Comment 2

[Zach Hoffman [:zrhoffman]]

Attachment: Testcase - snap to tick mark or step

Responding to Jonathan's magnet effect thoughts in bug 841942

If we have a "magnet effect", how does that interact with @step
and the clamp-to-values that @step introduces, [...] ?

Whichever's magnitude is larger, between the range of the tick mark magnet effect (in pixels?) and the @step size could decide whether the tick mark or a step is snapped to.

For example, in the attached testcase, Testcase - snap to tick mark or step, the first range input has a small step size relative to the range input's size, so tick marks get priority for snapping.

In the second range input in that testcase, the steps are large enough that the tick mark "magnet effect" is not observable.

[...] especially when
the @step and @list data points conflict?

Since only values that match the range's step are considered valid, any tick marks that are step mismatches should be skipped (see bug 1803303).

Comment 3

[Emilio Cobos Álvarez [:emilio]]

It's unclear what I'm getting asked here? That seems somewhat reasonable but concrete questions would be better :)

Comment 4

[Zach Hoffman [:zrhoffman]]

Oops, I meant to ask at the end of my comment Does that all sound okay? Thanks for figuring out what I probably would have been asking :)

Comment 5

[Zach Hoffman [:zrhoffman]]

Attachment: Bug 1803118 - Snap mouse to <input type=range> tick marks r?emilio

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/4970c9b75aad
Snap mouse to <input type=range> tick marks r=emilio

Comment 7

[Zach Hoffman [:zrhoffman]]

Attachment: Bug 1803118 - Use more fitting variable name r=emilio

Comment 8

[Serban Stanca [:SerbanS]]

Backed out for causing wpt failures on range-snap-to-tick-marks.

• Backout link
• Push with failures
• Failure Log
• Failure line: TEST-UNEXPECTED-FAIL | /_mozilla/html/rendering/non-replaced-elements/form-controls/range-snap-to-tick-marks-01.html | Snap to a slider's tick marks by clicking near them - assert_equals: expected "-3" but got "15"

Comment 9

[Pulsebot]

Backout by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/c3622b291dcc
Backed out changeset 4970c9b75aad for causing wpt failures on range-snap-to-tick-marks. CLOSED TREE

Comment 10

[Emilio Cobos Álvarez [:emilio]]

Probably the WPT on android can be fixed by adding a <meta name="viewport" content="width=device-width"> or so.

Comment 11

[Zach Hoffman [:zrhoffman]]

Thanks, Emilio! Reproduced the android WPT failure, verified that setting the "viewport" <meta> tag fixes it, and updated D163780 with the fix.

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e878192e792b
Snap mouse to <input type=range> tick marks r=emilio

Comment 13

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/e878192e792b