Should we have range value beside input[type=range] ?

I just added input[type=range] support, here’s the example: https://sweetalert2.github.io/#input-range

My question is to collaborators and other UI specialists: should we have by default <output> tag with current range value? As you probably know, the native behaviour for input[type=range] is to show slider only, without value:

As to me it would be nice for plugin users to have something like this by default:

I think, in most cases, it’s useful to see the current value.

Thoughts?

[gverni]

It feels wrong to convert output into input

I completely agree with you. Another way of looking at it though, is to consider range + output as single composite input element: in this case both elements should be able to change the value of the control. I feel this is extremely useful to give a fine grained control on small screen devices. But at the end of the day this has nothing to do (strictly) with Sweetalert2, and more to do with the range input (see my next comment as well)

I believe we shouldn’t add the additional complexity to the codebase becase the use-case is quite rare

This is a very good point. So even though I consider that useful, I agree we should not complicate the code base.

Here’s the solution of input[type=range] + input[type=number]:

I like that @limonte. I’ll add it to the sweetalert2-examples repo. As I said above, it may be useful for those that choose to have a range that should work (with fine grained values) on small screen as well.

[ledzgio]

Here’s the solution of input[type=range] + input[type=number]:

• source: https://glitch.com/edit/#!/caterwauling-plywood?path=swal2.js:28:64
• live demo: https://caterwauling-plywood.glitch.me/

The solution is quite straightforward, but I believe we shouldn’t add the additional complexity to the codebase becase the use-case is quite rare.

This works perfectly for what I need to do. Thank you.