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

Question

我正在使用 noUiSlider，并且尝试使用 slider 值作为表单输入值(以工作表单发送它)。 我尝试过在堆栈溢出上找到的各种示例，但似乎没有任何效果。 这是我的 slider 脚本:

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

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

我希望有一个非常简单的解决方案/解释，因为我实际上根本不了解 javascript...

Answer 1

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

1- 在表单中添加隐藏输入，该输入将包含 slider 值，并将在每次触发 slider 更改事件时更新。

<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 请求手动处理表单发布数据。如果需要可以提供演示...