w3c / w3c/csswg-drafts

New property to control the direction of slider controls

Open
#9,832 8 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

css-forms-1 HTML i18n-clreq i18n-jlreq i18n-mlreq i18n-tracker open-ui
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

I'm extracting this question from the various discussions in several forums:

For slider controls (<input type=range>, <progress>, <meter>, potentially <input type=checkbox switch>, etc.) there is a desire to be able to control:

  1. The orientation of the slider: horizontal vs. vertical.
  2. The polarity/direction of the slider: which way is toward "more".
  3. The writing mode and direction of any text associated with the control, such as tooltips.

In current browsers, #1 is controlled by the CSS writing-mode property, and #2 is controlled by the CSS direction property. This does allow full control of orientation and direction for sliders, and at least recently (thanks @dizhang168), this behavior is implemented interoperably, despite a lack of standards for this behavior. However, because of #3 (see https://github.com/whatwg/html/issues/4177#issuecomment-1882909538 in particular), it might make sense to have a specific CSS property to control the orientation and direction of slider type controls. One tricky detail will be getting it to behave predictably in the face of existing writing-mode/direction behavior, and maybe even the non-standard orient=vertical.

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 by reading the linked CSSWG, WHATWG, and Open UI discussions, then compare the existing writing-mode and direction behavior for range, progress, and meter controls. Done means defining a specific property and predictable interactions with writing-mode, direction, and the non-standard orient="vertical" behavior.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.