Can I disable changing value of ion-range by touching line, and only for knobs?


here’s an example


I need to make touchable knobs only, so touches on line won’t affect on value ?

I tried make some changes in css to disable line like this

ion-range::part(bar) {
  display: none;

But that didn’t help


Decided to append an element to an ion-range parent div and with styles like z-index and position: relative and it worked for me, just overflowed with div possible space on the line except the knobs, added transparent color and working good

let elemOverflowDivForScroll = document.createElement('div'); = 'relative'; = '999999999'; = 'overflowDivForScroll' = '36px'; = '36px'; = 'transparent'; = '5px'

Something like this

Answered By – Yehor

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published