Add a range field and support steps in text fields

[fritzmg]

This PR adds a range input field to the form generator.

It also allows the step value to be set for number input fields.

I still used the old method of re-using the minlength and maxlength fields - so it still needs to be adjusted when #437 gets implemented.

[Toflar]

I've added the [WIP] prefix so the PR does not get merged in it's current state as it depends on #437.

[fritzmg]

I have updated the PR using minval and maxval. Should I rebase this to 4.8?

[leofeyer]

No, Contao 4.8 is feature complete, so you can leave the branch as it is.

[fritzmg]

Oh that's too bad. I only made the changes just now, because the depending change for 4.8 was made just now: #437 (comment)

[leofeyer]

@fritzmg This PR needs to be rebased onto the current master branch so we can review it. 🙈

[fritzmg]

Rebased and ready to review.

[Toflar]

One minor detail, LGTM otherwise 👍

[leofeyer]

Contao 4.9 is now in the review phase in which we try to review and merge the remaining pull requests that have been created during the development phase. Your pull request does not yet meet the requirements to be reviewed though.

• Make sure that the PR is feature complete.
• Rebase the PR onto the latest master branch.
• Address the requested changes if any.
• Make sure that all CI checks are successful.

Please fix this soon if you can, because the review phase ends on January 15th and we need some time to review the PR before we can merge it.

[fritzmg]

👍 I didn't know about the <output> element actually. @leofeyer wdyt? Browser support is fairly limited on Microsoft's end though.

[asaage]

I think it could be any other element and the question is do we want a oninput -handler there.

[Toflar]

That's just Javascript. It's not native browser behaviour so I don't think we should support it. We might want to add support for the data-list once it's unified across all browsers though.

[asaage]

We might want to add support for the data-list

But then not seeing what you slide-to gets even worse 🤪

[leofeyer]

That's just Javascript. It's not native browser behaviour so I don't think we should support it.

I am with @Toflar here.

[fritzmg]

While I agree with adding the step attribute to the text field, I fail to see why we need a separate FormRange class. Its code is almost identical to the FormTextField class and we could easily implement the range type there by adding a new input validation.

Fine with me, I can change the PR accordingly :)

Still not sure if this is the right way to go. A new input validation would have the exact same settings as the digit validation.

Also setting the form type to "Text field" in order to get an <input type="range"> seems counter intuitive from a user experience perspective.

[Toflar]

I agree, it should be its own widget (might extend or share logic though). Especially if the data-list options become standardized it will be interesting.

[fritzmg]

I made a few more changes:

It is perfectly valid to create form fields like this:

<input type="number" min="0.5" max="1.5" step="0.1" value="0.2">
<input type="range" min="0.5" max="1.5" step="0.1" value="0.2">

Thus I have changed the rgxp of the minval, maxval and step fields accordingly. I also changed the SQL definition of step to allow storage of floats. However, I am not sure if varchar(10) is the best choice here (that's what minval and maxval previously used also).

HTML output like this

<input type="range" value="">

is invalid, as the content of the value attribute must not be empty and it must be numeric, when defined. Thus I also changed the output to cast it to a float, instead of encoding any entities.

[leofeyer]

Also setting the form type to "Text field" in order to get an <input type="range"> seems counter intuitive from a user experience perspective.

The same is true for <input type="numeric">, isn't it? So either we have dedicated classes for all HTML5 input types or we integrate them all into the text field. But please not a mix of both.

[fritzmg]

But there is a clear difference between

• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="search">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

and

• <input type="range">

The former input types all have a text field, where you click and then can enter values manually. The latter is handled completely differently from the others. Sure, some of the input types in the former list have additional client side validation and some added fluff (like spinners, datepickers, etc.). But their concept is similar to one another - while the range slider is a completely different UI concept.

(Sorry for the notification spam, my browser had some issues.)

[leofeyer]

Ok, that's a good point. 👍

[leofeyer]

Thank you @fritzmg.