How to create two inputs for the same field with responsive design?

Question

I'm trying to create a responsive design form with number input in form-group using Thymeleaf and Bootstrap.
My goal is to make such input that would be the slider type on mobile devices, and the text type on medium devices and bigger:

For that reason I'm using the two different divs for the same field residents with different classes to show and hide content depending on the device screen width (e.g. hidden-xs, hidden-sm, hidden-md, hidden-lg).

<div class="form-group required hidden-sm hidden-md hidden-lg">
    <label for="range_02" class="col-sm-2 control-label">Residents:</label>
    <input id="range_02" type="text" class="form-control" value="1" th:field="*{residents}"/>
</div>

<div class="form-group required hidden-xs">
    <label for="residents" class="col-sm-2 control-label">Residents:</label>
    <input id="residents" type="text" class="form-control" th:field="*{residents}" placeholder="4"/>
</div>

The input fields visibility is okay, it changes while I change my window width. However it seems I couldn't use 2 inputs for the same field at the same time - value is passing only through the first input which is slider.

I also tried to pass this two inputs to the same div and use the same visibility options for text and slider inputs. But the result is the same.

How to set another input not only hidden but inactive as well when the one is already shown?

No Spring MVC experience here, but I would assume it would allow you to accept an array of int. If you do this it should accept both values. You could then take the max of the array as your value. — David Lee, Apr 07 '17 at 23:36
Thank you for suggestion, but this seems like a workaround. I'd like to know is there any best practice to achieve this result. — DimaSan, Apr 07 '17 at 23:56
If you aren't too opposed to leveraging another library maybe check out jQuery UI slider. Here is another post that gives a great example on how to keep the slider in sync with the input. Then you can just use your existing CSS to show/hide as needed for your responsive stuff: http://stackoverflow.com/questions/7523864/ui-slider-with-text-box-input — Jas C., Apr 08 '17 at 03:34
@JasC. This is really great example of keep the slider in sync with the input. I think this is exactly what I need. Thank you for this link. — DimaSan, Apr 08 '17 at 20:31
Sure thing. Glad I was able to help point ya in the right direction! — Jas C., Apr 08 '17 at 20:35

score 0 · Accepted Answer · answered Apr 11 '17 at 10:13

As @JasC. suggested I binded my slider input with text input fields with JS function:

$(function () {
    var $range = $("#range_02"),
        $input = $("#residents"),
        instance,
        min = 1,
        max = 10;

    $range.ionRangeSlider({
        type: "single",
        min: min,
        max: max,
        onStart: function (data) {
            $input.prop("value", data.from);
        },
        onChange: function (data) {
            $input.prop("value", data.from);
        }
    });

    instance = $range.data("ionRangeSlider");

    $input.on("change keyup", function () {
        var val = $(this).prop("value");

        if (val < min) {
            val = min;
        } else if (val > max) {
            val = max;
        }

        instance.update({
            from: val
        });
    });
});

The only thing I have need to to make my construction works well is to put text input above the slider input on my form.

How to create two inputs for the same field with responsive design?

1 Answers1