jQuery滑块显示具有特定数据的多个输入JQM

Question

我正在尝试构建一个滑块（非范围）。我希望滑块在 3-4 个输入元素中显示数据（可能是一个选择框）。在表单小部件方面，我有点新手。使用 jQuery v2.1.0 和 JQM v1.4.5，添加 jQuery-UI 不是问题，只要它是响应式的并且适用于移动设备。

<div id="slider">
  <div id="slider"></div>
</div>
<input id="amount" readonly type="text">
<div class="data-display">
  <input id="result1" readonly type="text">
  <input id="result2" readonly type="text">
  <input id="result3" readonly type="text">     
  <select id="result4" readonly type="text">
</div>

我想要像我在堆栈溢出中找到的这样的小提琴减去计算。无需计算，只需显示数据：

http://jsfiddle.net/eqnLc9fg/1/

数据是特定的/唯一的。滑块将显示数据：

1st input = 149.0 F
2nd input = 100.6 C
3rd input = 57.8 psig
4th input (select) = 4.00 bar
(this would be center of the slider)

1st input = 150.0 F
2nd input = 101.1 C
3rd input = 56.8 psig
4th input (select) = 3.87 bar

在一个滑块中会有 30-50 组这些数据。全部具体，范围是不可能的。

选择框也可以控制其他输入和滑块。

不是 100% 确定滑块小部件是否是我正在尝试做的最佳选择。考虑过 iscroll vertical 或 table with overflow。滑块对我来说似乎是最好的选择，将所有内容都放在一个屏幕上。也欢迎提出建议。

我希望我的要求很清楚！ ; )

___选择框____ ___输入框____

-----------------滑块-----------------

____输入框______输入框____

谢谢！

这样更好地解释：

http://jsfiddle.net/Mottie/VfBkk/

Answer 1

你可以像这样构建它：

<div class="ui-grid-a">
  <div class="ui-block-a">
    <input id="result1" readonly type="text" />
  </div>
  <div class="ui-block-b">
    <input id="result2" readonly type="text" />
  </div>
</div>

<!-- /grid-a -->
<div class="full-width-slider">
  <input type="range" name="slider" id="slider" min="0" max="13" value="6" />
</div>
<div class="ui-grid-a">
  <div class="ui-block-a">
    <input id="result3" readonly type="text" />
  </div>
  <div class="ui-block-b">
    <select id="result4" readonly >
      <option value="0">The 1st Option</option>
      <option value="1">2Option</option>
      <option value="2">3Option</option>
      <option value="3">4Option</option>
      <option value="4">5Option</option>
      <option value="5">6Option</option>
      <option value="6">7Option</option>
      <option value="7">8Option</option>
      <option value="8">9Option</option>
      <option value="9">10Option</option>
      <option value="10">11 Option</option>
      <option value="11">12 Option</option>
      <option value="12">13 Option</option>
      <option value="13">14 Option</option>
    </select>
  </div>
</div>

这是隐藏滑块输入并使其全宽的 CSS：

/* Hide the number input */
.full-width-slider input {
    display: none !important;
}
 .full-width-slider .ui-slider-track {
    margin-left: 15px;
}

我正在使用 JQM 网格来布置控件，但您可以通过其他方式进行。然后在脚本中捕获滑块的更改事件以更新输入：

var menSizes = Array(14)
    menSizes[0] = [5, 6, 38];
    menSizes[1] = [5.5, 6.5, 38.5];
    menSizes[2] = [6, 7, 39];
    menSizes[3] = [6.5, 7.5, 40];
    menSizes[4] = [7, 8, 40.5];
    menSizes[5] = [8, 9, 42];
    menSizes[6] = [8.5, 9.5, 42.5];
    menSizes[7] = [9, 10, 43];
    menSizes[8] = [9.5, 10.5, 44];
    menSizes[9] = [10, 11, 44.5];
    menSizes[10] = [10.5, 11.5, 45];
    menSizes[11] = [11, 12, 46];
    menSizes[12] = [11.5, 12.5, 46.5];
    menSizes[13] = [12, 13, 47];

$(document).on("pagecreate", "#page1", function(){
  $("#slider").on("change", function(){
    var sel = menSizes[$(this).val()];
    $("#result1").val(sel[0]);
    $("#result2").val(sel[1]);
    $("#result3").val(sel[2]);        
    $("#result4").val($(this).val()).selectmenu("refresh");
  });  
});

工作DEMO