Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
2 replies
JWode

pointer-events and the thumb on sliders

ChatGPT seems convinced that the 'thumbs' on sliders aren't treated as part of the input range type, ie if you set point-events:none the thumbs would still be clickable. And that looks right, here:

https://codepen.io/nwoodward/pen/wvYjeev

Both thumbs move.

But not in this code below, despite it being identical the thumbs can't be clicked, and I'm stumped as to why - can anyone see anything obvious?

        {/* Slider */}
        <div className='relative h-2 mt-8 border rounded'>
          <div className='absolute top-0 left-8 right-12 h-full bg-[#17A2B8]'></div>
        </div>
        {/* Range-input */}
        <div className='relative h-6'>
          <input
            type='range'
            className='absolute w-full h-full -top-4 bg-transparent appearance-none pointer-events-none'
            min='0'
            max='10000'
            // value='2500'
            // step='100'
          />
          <input
            type='range'
            className='absolute -top-4  w-full h-full bg-transparent appearance-none pointer-events-none'
            min='0'
            max='10000'
            // value='2500'
            // step='100'
          />
        </div>
CodePennick
wvYjeev
...
wvYjeev
Was this page helpful?