Range input in a scaled element

[peilingjiang]

I am using SketchPicker mounted under a scaled element (with transform: scale(x) applied to its CSS), and found that when dragging the range input (ones for Hue and Alpha), the thumb does not follow the cursor correctly, while the 2-D color picker at the top works fine.

I assume it's beacause of using the native HTML range input element that doesn't account for the scales. I'm not sure of the frequency of use cases but would it be possible to have a customized range element that takes the proportional position offsets of the cursor to set the values? Thanks.