使用变量值设置滑块拇指高度答案

【问题标题】：Set the slider thumb height with variable value使用变量值设置滑块拇指高度
【发布时间】：2017-06-23 10:23:23
【问题描述】：

我需要使用 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 的slider-thumb 吗？

【问题讨论】：

【解决方案1】：

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

设置高度

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

获取高度

$('your_selector').height();

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

这里正在工作plunker

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

【讨论】：

范围输入的高度为 0px，但滑块没有，例如，如果将高度设置为 80%，它将占用 0px 的 80%，因此滑块的高度为 0px
我想将滑块拇指的高度设置为输入范围父级的 80%
如何使用 jquery 将高度设置为滑块拇指的 80%？
它是一个webkit-slider-thumb，你不能用jquery访问它，这是我的问题
这里是我的plnkr.co/edit/d462UvF2FF54V1HHEt6U?p=preview 高度设置为150px；如果你在 css 文件中将高度设置为 80%，滑块会消失