使用 JavaScript 的范围选择器

发布于 2024-11-30 10:15:54 字数 190 浏览 0 评论 0原文

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

  1. 如何使其垂直?

  2. 如何控制滚动按钮本身?我想改变它的图像,并根据滚动来改变它的大小。

谢谢

I want to create a very simple range picker, but I'm having 3 problems
1. the HTML range tag works only on chrome and safary. how can I create one that works on other browsers?

  1. How do I make it vertical?

  2. How can I control the scrolled button itself? I want to change it's image, and to change it's size according to the scrolling.

thanks

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

不寐倦长更 2024-12-07 10:15:54

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

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

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

Range tag is html5 defined element. As you know, html5 is not fully supported in all browsers, so for the time being, it's best to use alternative, like jquery which is the safest way to be browser compatible.

Your first question for the vertial slider: http://jqueryui.com/demos/slider/#range-vertical

As to your second question, it's really best to use custom control. Using the jquery range slider, you can hook up to the slider events and change the property of some element according to the value. Look up the api for the slider.
Check out how they do it with changing the color value. You can do the same with changing the size of an image for example.
http://jqueryui.com/demos/slider/#colorpicker

小镇女孩 2024-12-07 10:15:54

一般来说,最好的选择是放弃 表单字段并选择 jQuery UI 范围滑块

In a general sense, your best bet is forgoing the <input type="range"...> form field and opting for the jQuery UI range slider.

入画浅相思 2024-12-07 10:15:54

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

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

JQuery UI has an extensive library of form elements and I think they are also backward compatible with older versions.

Try this URL: http://jqueryui.com/demos/slider/#range

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文