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

Question

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

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

示例图片：

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

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

Answer 1

如果您搜索“Form Range Input”或“RangeSlider JS”而不是滑块来查找教程，可能会有所帮助。

但是我没有看到任何理由为什么不能通过JS和CSS更容易和更干净地完成这个。

如果您在查看时遇到问题，请尝试将您的设计划分为类似的部分，并避免尝试使基于图像的设计响应的麻烦。 （就像我们以前一直在努力争取的那样）

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

2. 滑块是一个圆角矩形，内有另外三个正方形。

3. 信息框是带有文字的div，并附有CSS triangle。

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

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