javascript - 使用变量值设置 slider 拇指高度

Question

我需要使用 jquery 设置范围输入的 height 属性。我遇到了很多答案，说这是不可能的，你需要做一个解决方法，这里是 link ，或者这个 link

CSS:

input[type="range"]::webkit-slider-thumb {
      height : 15px;
}

建议的解决方法是添加另一个具有新高度的 css 类，例如:

.newHeight::webkit-slider-thumb {
      height : 45px;
}

最后，您可以通过添加(或切换)新类来设置新的高度:

JQuery :

$('html').addClass('newHeight');

这工作正常，但我的问题是新的 height 在我的情况下应该是可变的；我没有确切的值，它是根据页面加载时的其他参数计算得出的。那么在这种情况下是否可以设置 slider-thumb 的 height ？

Answer 1

您可以使用 JQuery 设置/获取元素的高度 .height()

设置高度

$('your_selector').height(50);

获取高度

$('your_selector').height();

获取输入范围的父元素高度并设置拇指高度为它的80%

这里正在工作plunker

基本上，通过更改元素的宽度，您可以更改缩略图的高度。我刚刚提到了 5%。在 plunker /* SET HEIGHT */ 的 css 文件中找到该注释。你可以在那里改变