Kevin Powell - Community•2y ago

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>

        {/* 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>

nick

CodePen

wvYjeev

...

2 Replies

Unknown User•2y ago

Message Not Public

JWodeOP•2y ago

Hey @monimolimnion , unfortunately not - you can delete the JS in the codepen and the second slider is still displayed correctly with clickable thumbs (the JS is just for tracking/changing the inputs and background)

Gaming

Programming

pointer-events and the thumb on sliders