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 请求手动处理您的表单发布数据。如有需要可提供Demo...