javascript - HTML input range hide thumb -
i got range input in 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 css applied 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 option want hide thumb keeping track. if comment out display: none;
works. range input without thumb. want dynamically based on user interaction.
i don't know how interact input on css. i'm using angularjs , javascript no jquery (i'll keep away project long can) i'm looking pure js solution.
i read this, this , this among others solution. i'm able hide input not track or thumb separately.
so assume .custom-range on parent element right? if code 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 use ng-class
add class div.custom-range
dynamically:
<div class='custom-range' ng-class="{'disabled-range':isdisabled()}"> .... </div>
and add bit of css:
.custom-range.disabled-range input[type='range']::-webkit-slider-thumb { display: none; }
haven't tested .. hope it's clear enough.
Comments
Post a Comment