google / google/material-design-lite

Completely rewrite the slider

Open
#1,738 0 comments 0 reactions 1 assignee Claimed by @sgomes View on GitHub
2.0 Big Themes P1
Dominant language
HTML
Stars
32.2k
Forks
4.9k
PR merge metrics
No merged PRs in 30d

Description

`mdl-slider` is implemented with native styling on the HTML `range` element. This is causing a number of problems:
- Since these properties are all prefixed and behave slightly differently, we essentially have three different implementations.
- There are differences even within the same browser family (see #1625).
- There are hard to fix bugs due to the Material Design spec requiring things the native component doesn't expect (such as resizing the thumb, see #1445).
- There are certain parts of the spec we simply can't implement in certain browsers, particularly around animations.
- The current implementation is incomplete, and only covers continuous sliders. Adding the rest would be very difficult, given the limitations above.

We should instead switch to a similar approach to the one we use in checkboxes and radio buttons, where we have a hidden native element for state and accessibility, and we render our own styling on top.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.