带有 javascript 的范围选择器答案

【问题标题】：range picker with javascript带有 javascript 的范围选择器
【发布时间】：2026-02-02 00:25:02
【问题描述】：

我想创建一个非常简单的范围选择器，但我遇到了 3 个问题 1. HTML range 标签仅适用于 chrome 和 safary。如何创建一个可以在其他浏览器上运行的版本？

如何使其垂直？
如何控制滚动按钮本身？我想改变它的图像，并根据滚动改变它的大小。

谢谢

【问题讨论】：

你用它走了多远？你能包括你到目前为止所做的事情吗？
请贴出相关的html和javascript；理想情况下使用JS Fiddle 演示。

标签： javascript html slider range

【解决方案1】：

Range 标签是 html5 定义的元素。如您所知，并非所有浏览器都完全支持html5，所以目前最好使用替代方案，例如jquery，这是与浏览器兼容的最安全的方式。

您对垂直滑块的第一个问题：http://jqueryui.com/demos/slider/#range-vertical

关于你的第二个问题，最好使用自定义控件。使用 jquery 范围滑块，您可以连接到滑块事件并根据值更改某些元素的属性。查找滑块的 api。看看他们是如何改变颜色值的。例如，您可以通过更改图像的大小来执行相同的操作。 http://jqueryui.com/demos/slider/#colorpicker

【讨论】：

【解决方案2】：

一般来说，最好的选择是放弃<input type="range"...> 表单字段并选择jQuery UI range slider。

【讨论】：

【解决方案3】：

JQuery UI 有一个广泛的表单元素库，我认为它们也向后兼容旧版本。

试试这个网址：http://jqueryui.com/demos/slider/#range

【讨论】：

Binaek，请在您的回答（或问题）中don't use signatures。
@David... 抱歉。不知道 SO 中不允许签名。