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');。

我会很感激一个非常简单的 solution/explanation，因为我实际上根本不知道 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 请求时手动处理您的表单 post 数据。如有需要可提供Demo...

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

noUiSlider -> use value as form input

javascript

nouislider