Slider monitors look significantly different in different browsers

[fsih]

Expected Behavior

Slider monitors should probably look consistent for consistent experience

Actual Behavior

Slider monitors look very different in different browsers on Windows, and are also fairly different in size.

Here it is on Mac Chrome, Firefox, and Safari, probably more what it's "supposed" to look like

Steps to Reproduce

Make a slider monitor in Chrome/Edge/Firefox on Windows

Operating System and Browser

Windows

[Kenny2github]

That's why you make your own slider, instead of relying on any built-in one :)

[kyleplo]

After searching the web, I found a few good react sliders:

• https://github.com/whoisandy/react-rangeslider
• https://github.com/davidchin/react-input-range
• https://github.com/react-component/slider

[kyleplo]

Also found one that styles the range input: https://codepen.io/chriscoyier/pen/FtnAa

And created my own that uses scrollbars: https://kyleplo.github.io/c/demos/scrollslider

[fsih]

@paulkaplan @carljbowman any preference on what library to use?

[rschamp]

We should have a good spec for how the slider should look in every browser, especially with the help wanted label on this issue.

I think we also may prefer rendering to SVG so it will be easier to move the sliders into scratch-render if we decide to do that later down the line.

Considerations for a good library to use:

• well maintained
  • not a ton of unaddressed GitHub issues
  • recent pull requests
  • a good number of other people using it
  • updates haven't wildly changed the API for it, causing maintenance annoyance
• configurable to our needs, both in terms of behavior and styling. But not overly-configurable because it should also be...
• small in file size
• performant

[kyleplo]

I know you want to use a library, but I forked this pen and made this one, which looks more like Scratch