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;
}

尚未对此进行测试..但我希望它足够清楚。