如何将自定义皮肤集成到 jQuery 网页中

Question

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

我的任务是拍摄范围滑块的图像，将其添加到网页中，并使滑块具有交互性/可拖动性。我知道 jQuery 有自己的滑块 (https://jqueryui.com/slider/#multiple-vertical)，但如果您想使用范围滑块的图像，这似乎并不适用。

示例图片：
_{（来源：dcrazed.com）}

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

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

Answer 1

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

但是，我看不出有什么理由不能通过 JS 和 CSS 更轻松、更干净地完成这项工作。

如果您在可视化方面遇到问题，请尝试将您的设计分解成这样的部分，这样您就可以省去尝试使基于图像的设计响应式设计的麻烦。 （就像我们之前都在努力过的那样）

---

1. 滑块旋钮本身是一个圆角正方形，里面有三个正方形。

2. 滑动条是一个圆角矩形，其中放置了另外三个正方形。

3. 信息框是一个带有文本的 div 和一个CSS triangle。

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

---

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