Javascript 如何将自定义外观集成到jQuery网页中

编辑： tl；我有一个水平条的.png文件和一个方形按钮的.png文件。我想能够添加两个图像到网页，并能够沿矩形滑动按钮。我知道可以用更好的方式制作范围滑块，但使用.png文件是一项很难的要求。

我的任务是拍摄范围滑块的图像，将其添加到网页，并使滑块具有交互性/可拖动性。我知道jQuery有自己的滑块（），但如果您想使用范围滑块的图像，这似乎不适用

示例图像：

如何实现这一点？我看到的所有教程都使用HTML/CSS/JS元素制作滑块，而我有单独的滑块和可拖动按钮的图像

---

仅供参考，我们使用图像的原因是它看起来比jQuery提供的标准滑块更好。

如果您搜索“表单范围输入”或“RangeSloider JS”而不是滑块来查找教程，可能会有所帮助

然而，我不明白为什么不能通过JS和CSS更轻松、更干净地完成这项工作

如果你在视觉化方面遇到困难，试着把你的设计分成这样的部分，这样可以省去你试图使基于图像的设计具有响应性的麻烦。（就像我们之前都在为之奋斗）

---

滑块旋钮本身是一个圆形正方形，内部有三个正方形

滑块是一个圆形矩形，内部还有三个正方形

信息框是一个带有文本的div，并附有一个

刻度本身比较复杂，需要根据分辨率使用JS动态添加和删除，但它们的视觉细节实际上只需要基本样式

---

---

如果您仍然觉得需要使用图像并破坏网站的响应能力，请查看一些代码笔，看看其他代码笔对类似要求做了什么。

您是否正在寻找带有自定义工具提示的滑块？如果是这样的话，网络上有很多代码示例。谷歌是你的朋友。我道歉。坏例子形象。滑块没有工具提示，也不需要工具提示。我有一个水平条的.png文件和一个方形按钮的.png文件。我想能够添加两个图像到网页，并能够沿矩形滑动按钮。谢谢詹姆斯。我看了看代码笔，似乎每个人都在使用标准的范围滑块，而不是使用图像。不幸的是，图像是一个硬要求。