如何使用响应式设计为同一字段创建两个输入？

Question

我尝试使用Thymeleaf和Bootstrap在form-group创建一个带数字输入的响应式设计表单。
我的目标是在移动设备上输入滑块类型，在中型设备上输入文本类型更大：

出于这个原因，我使用不同类的相同字段 residents的两个不同div来显示和隐藏内容，具体取决于设备屏幕宽度（例如{{ 1}}，hidden-xs，hidden-sm，hidden-md）。

hidden-lg

输入字段可见性正常，当我更改窗口宽度时，它会发生变化。但是，我似乎无法同时为同一个字段使用2个输入 - 值只通过第一个输入，即滑块。

我还尝试将这两个输入传递给同一个div，并为文本和滑块输入使用相同的可见性选项。但结果是一样的。

如果已经显示了另一个输入，不仅隐藏了，而且非活动也是如此？

Answer 1

作为@JasC。建议我用带有JS功能的文本输入字段绑定我的滑块输入：

$(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
        });
    });
});

我唯一需要让我的构造工作得很好的是将文本输入放在滑块输入上。