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解决方案。

我阅读了这个，这个和这个等其他解决方案。我能够隐藏输入，但无法分别隐藏轨道或滑块。

- Esselans

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

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

- sirrocco

---

昨天我工作了很多小时，以至于我没有看到显而易见的事情。我从未想过ng-class是解决方案。谢谢！ - Esselans