Support slider for web platforms (Experimental)

[softmarshmallow]

Support slider with native html el - <input type="range"/>

Screen.Recording.2022-03-21.at.4.09.04.PM.mov

Limitations

• progress fill (value) color is not customizable by chrome & safari.

/**
 * There are no proper way to handle the progress color in Chome, Safari.
 * Moz supports the `-moz-range-progress`, `-moz-range-track`, but this is [not standard](https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-range-progress)
 *
 * We use this trick instead.
 * https://codepen.io/okayoon/pen/PMpmjp
 *
 * this only works with overflow: hidden, so we cannot show overflowing round thumb.
 *
 * we can also do it by using linear-gradient, [but this can't be done only by using css](https://codepen.io/duplich/pen/qjYQEZ).
 *
 * @returns
 */
function _aberation_support_progress_fill_dirty({ color }: { color: Color }) {
  if (color === undefined) {
    return;
  }
  return {
    "box-shadow": `-100vw 0 0 100vw ${css.color(color)}`,
  };
}

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/grida/designto-codes/9zXdvM7Cg1TRNhFMYuSMS82hEVnu
✅ Preview: https://designto-codes-git-support-slider-grida.vercel.app