HTML input range hide thumb

Question

I got this range input in my Ionic Mobile App:

<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()">

With this CSS applied to it:

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

Depending on an option I want to hide the thumb but keeping the track. If I comment out display: none; it works. I get range input without the thumb. But I want to do it dynamically based on user interaction.

I really don't know how to interact with input on CSS. I'm using angularJS and javascript but no JQuery (I'll keep it away from my project as long as I can) so I'm looking for a pure js solution.

I read this, this and this among others solution. I'm able to hide the input but not the track or thumb separately.

Answer 1

So I assume .custom-range will be on a parent element right? If so the code could look like this:

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

You could use ng-class to add a class to div.custom-range dynamically:

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

and add a bit of css:

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

Haven't tested this .. but I hope it's clear enough.