javascript - HTML 输入范围隐藏缩略图

Question

我在我的 Ionic 移动应用程序中输入了这个范围:

<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">

应用此 CSS 后:

.custom-range input[type='range']::-webkit-slider-thumb {
    width: 20%;
    /*display: none;*/
    height: 1.6vh;
    background: rgb(255,255,255);
    box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 1);
    margin-top: -3px;
    border-radius: 5px;
}

根据一个选项，我想隐藏拇指但保持轨迹。如果我注释掉 display: none; 它会起作用。我不用拇指就能得到范围输入。但我想根据用户交互动态地进行。

我真的不知道如何与 CSS 上的输入交互。我使用的是 angularJS 和 javascript，但没有使用 JQuery(我会尽可能远离我的元素)所以我正在寻找纯 js 解决方案。

我读了this , this和 this除其他解决方案。我可以单独隐藏输入但不能隐藏轨道或拇指。

Answer 1

所以我假设 .custom-range 将位于父元素上，对吧？如果是这样，代码可能如下所示:

<div class='custom-range'>
  <input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
</div>

您可以使用 ng-class 将类动态添加到 div.custom-range:

<div class='custom-range' ng-class="{'disabled-range':isDisabled()}">
   ....
</div>

并添加一些CSS:

.custom-range.disabled-range input[type='range']::-webkit-slider-thumb {
    display: none;
}

还没有测试过这个..但我希望它足够清楚。