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

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -