pointer-events and the thumb on sliders

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