使用可变值设置滑块拇指高度

Question

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

CSS：

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

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

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

最后你可以通过添加（或切换）新类来设置新的height：

JQuery：

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

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

Answer 1

您可以使用JQuery .height()

设置/获取元素的高度

设定身高

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

获得身高

$('your_selector').height();

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

这是有效的plunker

基本上，通过更改元素的width，您可以更改拇指的height。我刚才提到5%。在plunker / * SET HEIGHT * / 的css文件中找到该评论。你可以改变那里