Range input in a scaled element

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.

Start with SketchPicker's Hue and Alpha range inputs and reproduce the issue by applying CSS transform: scale(x) to their parent. Compare their dragging behavior with the working 2-D color picker under the same transform. Done means the range thumb follows the cursor proportionally and the Hue and Alpha values update correctly.

Written by the indexing model from the issue text.