使用纯CSS作为图像之间的分离的样式范围输入

时间:2018-02-23 17:05:50

标签: javascript html css user-interface

我有两个图像,我需要非常准确地比较它们,所以我想把它们放在另一个之下,让用户滑动顶部的一个以发现另一个。我决定使用输入范围来滑动图像。
我想设定一个范围输入,以成为两个图片之间的分离。正如您在我的示例小提琴(https://jsfiddle.net/up068q4q/55/)上看到的那样,我非常接近但是我需要通过鼠标点击我的第一张图片来触发事件。

我试图调整我的输入大小等于我的图像,但它过去并阻止鼠标事件。

我添加了一些规则,当窗口调整大小时我的图像大小可能会改变,而且我没有设法动态更改CSS以进行范围输入,所以我认为纯CSS将是一个很好的解决方案。
增加拇指的高度(移动范围输入的部分)看起来是个好主意,但我不知道如何触发它...

$('myInputRange').css('height', pictureSize)

真的不是这份工作......

1 个答案:

答案 0 :(得分:0)

重叠容器的clients可能是问题所在。

我有一个JSFiddle HERE,它会将onliick分配给您的z-index元素,然后该函数会触发。另外,我复制了下面的JS代码:

slider