Question

我正在使用noUiSlider，我正在尝试使用滑块值作为表单输入值（以工作形式发送）。我已经尝试了各种可以在堆栈溢出时找到的示例，但似乎没有任何工作。这是我的滑块脚本：

<script>
var slider = $('#slider');
noUiSlider.create(slider[0], {
    start: [2000],
    range: { min: 2000, max: 10000 },
  step: 500,
  tooltips: true,
  connect: [true, false],
});
</script>

也许有一个提示，为什么我找到的代码不起作用。因为要启动滑块，我在某个地方发现代码var slider = $('#slider');对我有效而不是var slider = document.getElementById('slider');，如大多数示例和文档中所示。

我很感激一个非常简单的解决方案/解释，因为我实际上根本不知道javascript ...

Answer 1

noUIslider不会创建html输入，所以我可以看到2个简单的选项。

1-在表单中添加一个包含滑块值的隐藏输入，每次触发滑块更改事件时都会更新。

<form>
 <div id="slider"></div>
 <input id="sliderValueInput" type="hidden" value=""> 
</form>

<script>
var slider = noUiSlider.create($("#slider")[0], {
    start: [2000],
    range: { min: 2000, max: 10000 },
  step: 500,
  tooltips: true,
  connect: [true, false],
});

//define initial hidden input value with slider value
$("#sliderValueInput").val(slider.get());

//update hidden input value on slider change
slider.on("change", function() {
    $("#sliderValueInput").val(slider.get());
});
</script>

https://codepen.io/anon/pen/mxXYBK

2-例如，在提交时手动处理您的表单发布数据。如果需要，可以提供演示......

noUiSlider - ＆gt;使用值作为表单输入

1 个答案: