如何用jQuery滑块覆盖html输入字段？

Question

我有第三方基于网络的民意调查应用程序。一个问题要求用户输入一个数字。我希望在那里有一个滑块，数字滑块刻度上滑块的最终位置会被推入应用程序的数字输入字段。我无法更改来自应用程序的HTML，但他们确实允许我添加CSS和JavaScript。

作为一名被要求查看此HTML / CSS / JS / UI问题的数据库/分析人员，我不知道如何“连接点”以使用CSS或JavaScript将滑块集成到应用程序中或者其他什么，将滑块覆盖在数字的顶部，但仍然只用提交发回一个字段。

Answer 1

您需要在“slide”事件中将输入元素的值绑定到滑块的值。这是一个JSBin example。

在实践中，您通常使用<input type="hidden" />元素来保存此值，该值将随表单一起发布，但对用户保持透明。

Answer 2

正如@dperish先前所说，你可能需要使用类似jquery-ui的滑块。

由于您无法更改文档的HTML，因此您可以采取以下措施：

1）使用带有id或类的jquery动态创建div，使用类似的东西。

2）将div放置到您想要的位置（即已存在的输入上方/下方）。 对于第1步和第2步，请查看以下内容：Creating a div element in jQuery

3）在这个动态创建的div上启动滑块并使用@dperishe的答案将输入的值更改为幻灯片上滑块的值。

4）使用CSS隐藏初始输入。

我认为如果您按照上述步骤操作，最终结果将是您所追求的目标。