[csswg-drafts] [css-pseudo-4] Standardizing input[type="range"] styling (#4410)

richiksc has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo-4] Standardizing input[type="range"] styling ==
Currently, the state of styling `<input type="range">` across browsers is a nightmare. Chrome, IE, Safari, and Edge each have their own way of styling range inputs with differently named pseudo-elements. With this proposal, I want to bring some unity and standardization to this similar to the CSS scrollbars spec. Currently, Chrome has no support for styling the "progress" part of a range input (the area corresponding to "below" the current value, in LTR languages, the track to the left. @danielstern has written [an article about it on CSS-Tricks](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/), and although it was last updated in 2017, most of it still applies.

**Thumb:** the UI element that the user interacts with and is dragged by the user - it shows the current state of the range.
**Track:** The "groove" or bar that the thumb runs along - shows the "range" (min and max values) of the range.

**WebKit/Blink (Chrome/Opera/Safari):**
```css
::-webkit-slider-thumb { /* Styles the thumb of the input*/ }
::-webkit-slider-runnable-track { /* Styles the track of the input*/ }
```

**Firefox**
```css
::-moz-range-thumb { /* Styles the thumb of the input*/ }
::-moz-range-track { /* Styles the track of the input*/ }
::-moz-range-progress { /* Styles the progress/fill below the thumb of the input*/ }
```

**IE/Edge**
```css
::-ms-thumb { /* Styles the thumb of the input*/ }
::-ms-track { /* Styles the track of the input*/ }
::-ms-fill-lower { /* Styles the progress/fill below the thumb */ }
::-ms-fill-upper { /* Styles the fill above the thumb */ }
```

As you can see, attempting to style a consistent range input across browsers is a daunting task and requires a lot of CSS and repetition of styles. I'd like to propose three new standard pseudo-elements for styling the range:

```css
::range-thumb { /* Styles the thumb of the input*/ }
::range-track { /* Styles the track of the input*/ }
::range-progress { /* Styles the progress/fill below the thumb of the input*/ }
```

![range-pseudo-proposal-diagram](https://user-images.githubusercontent.com/8939680/66600408-0e922e80-eb6b-11e9-97c6-2d4eb439e3ae.png)

Sample CSS for the above mockup would be something like this:

```css
input[type=range]::range-track {
  width: 100%;
  height: 20px;
  border-radius: 10px;
  background-color: #eee;
  border: 2px solid #ccc;
}

input[type=range]::range-thumb{
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: white;
  border: 2px solid #1976D2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

input[type=range]::range-progress {
  height: 20px;
  border-radius: 10px 0 0 10px;
  background-color: #2196F3;
  border: 2px solid #1976D2;
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4410 using your GitHub account

Received on Thursday, 10 October 2019 19:39:50 UTC