Question

我在提交表单时遇到问题，以保持NoUiSlider范围滑块中的值可见。

所以人们可以设置范围，然后点击提交按钮。通过表单很好地提交了该范围滑块的值，但滑块的范围更改为新的设置值。

所以我将范围设置为例如。 0 - 500.当某人将范围设置为例如。 100-400然后提交表格然后范围更改为100-400。所以人们不能将范围改回0-500。

所以我的问题：如何保持范围（0-500），但将手柄移动到设定值（100-400）？

所以我拥有的是：

  <form>
    <input type="hidden" name="max" value="0" id="filter_form_max" />
    <input type="hidden" name="min" value="500" id="filter_form_min" />

     <div id="slider-handles"></div>

    <input type="submit" class="price-btn" />{{ 'Set price' | t }}
  </form>

和JS：

$(function() {


 var handlesSlider = document.getElementById('slider-handles');

  noUiSlider.create(handlesSlider, {
    start: [ 0, 500 ],
    format: wNumb({
        decimals:0,
        thousand: '.'
    }),
    range: {
        'min': [ 0 ],
        'max': [ 500 ]
    },
    tooltips: true,
  });
  handlesSlider.noUiSlider.on('update', function( values, handle ) {
    var minVal = document.getElementById('filter_form_min');
    var maxVal = document.getElementById('filter_form_max');
      minVal.value = values[0]
      maxVal.value = values[1]
  });


 });

Answer 1

您只需要更改start数组的值。尝试更改以下内容。它对我有用。

    GridPane gridPane = (GridPane) editor.getChildrenUnmodifiable().get(0);
    RowConstraints row1 = new RowConstraints();
    row1.setVgrow(Priority.NEVER);
    RowConstraints row2 = new RowConstraints();
    row2.setVgrow(Priority.NEVER);
    RowConstraints row3 = new RowConstraints();
    row3.setVgrow(Priority.ALWAYS);
    gridPane.getRowConstraints().addAll(row1, row2, row3);

滑块NoUiSlider值保持范围

1 个答案: