noUiSlider -> 使用值作为表单输入

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- 在提交时手动处理表单发布数据，例如使用 AJAX 请求。如有需要可提供演示...