Javascript 努伊斯利德->；使用值作为表单输入

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

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

变量滑块=$（“#滑块”）；
创建（滑块[0]{
起始日期：[2000]，
范围：{最小值：2000，最大值：10000}，
步骤：500，
工具提示：正确，
connect:[正确，错误]，
});

也许这里有一个提示，为什么我发现的代码不起作用。因为要启动滑块，我在某处找到了代码

var slider=$（“#slider”）

为我工作，而不是

var slider=document.getElementById（'slider'）如大多数示例和文档中所示

我希望有一个非常简单的解决方案/解释，因为我实际上根本不懂javascript…
noUIslider不创建html输入，因此我可以看到两个简单的选项

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>


var slider=noUiSlider.create（$（“#slider”）[0]{
起始日期：[2000]，
范围：{最小值：2000，最大值：10000}，
步骤：500，
工具提示：正确，
connect:[正确，错误]，
});
//使用滑块值定义初始隐藏输入值
$（“#sliderValueInput”）.val（slider.get（））；
//在滑块更改时更新隐藏的输入值
slider.on（“更改”，函数（）{
$（“#sliderValueInput”）.val（slider.get（））；
});


2-例如，在提交AJAX请求时手动处理表单post数据。如果需要，可以提供演示…
谢谢您的回答，但这似乎不适合我。我已将type=“hidden”更改为“text”，以查看该值是否显示，但它没有显示。这快把我逼疯了！提供您的代码，如果你想有一个个性化的工作环境，这将是伟大的！基本上是：哦，对不起，我以前从未使用过codepen，而且我认为您只需要查看我的html中的内容以供参考。我将导入这些文件并添加新的注释。