openui / openui/open-ui

Should we standardize the anatomy of `<input type=range>`?

Open
#297 19 comments 11 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-triage
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

First, I'm a bit unclear on Open-UI vs. WhatWG HTML for this. This issue is about standardizing the pseudo element parts of the Web Platform <input type=range>. Does this belong here? Or in WHATWG? I do see that there is a research page for "slider" which is the Open UI concept implemented by <input type=range>.

Problem

  1. No healthy way to style the filled/progress amount of the slider
    1. CSS only solutions are bound to the size of the track based on the only cross browser solution possible
      1. example from native-ui (about as beautiful as they get)
      2. example: since this design called for the thumb to be larger than the track, CSS only can't show the "filled" amount
    2. current prefixed selectors stomp each other, so developers are forced to duplicate styles
      1. Josh Comeau sharing their learnings about this oddity: tweet
    3. Javascript solution runs on page load and watches for user input to update a custom property
      1. example
    4. Firefox has ::-moz-range-progress
      1. MDN
    5. we've recently added support for accent-color which will tint this fill range state, but still can't target it with a selector and give it a gradient background
  2. Partial support of ticks and labels
    1. [vertical] completely unsupported with ticks
      1. vertical tucked behind a prefix -webkit-appearance: slider-vertical; why?
    2. labels missing
    3. missing selectors for styling ticks / labels

Tasks:

  1. Separate track from progress and enable ::-webkit-slider-progress-track as a style target for CSS
  2. Complete current ticks implementation to work with vertical
    1. unprefix the selectors
    2. support attribute
  3. Add labels to our slider implementation
  4. Help spec a way to style the labels and ticks

Resources

--> Full credit due here to @argyleink

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Open UI slider research page and the linked MDN and HTML specification resources, while resolving whether the work belongs in Open UI or WHATWG. Define the scope for progress styling, vertical ticks, and labels; done would require a settled specification direction for the requested pseudo-elements and attributes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.