This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 11127 - tic marks for <input type="range">
Summary: tic marks for <input type="range">
Status: RESOLVED NEEDSINFO
Alias: None
Product: HTML WG
Classification: Unclassified
Component: LC1 HTML5 spec (show other bugs)
Version: unspecified
Hardware: PC Windows XP
: P2 enhancement
Target Milestone: ---
Assignee: Ian 'Hixie' Hickson
QA Contact: HTML WG Bugzilla archive list
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2010-10-22 18:29 UTC by Jim Michaels
Modified: 2011-08-04 05:36 UTC (History)
5 users (show)

See Also:


Attachments

Description Jim Michaels 2010-10-22 18:29:14 UTC
I don't know if this would fit ARIA's requirements, or even if that is necessarily relevant.
tic marks are essentially a visual feature.
tic marks have nothing to do with mouse input.
tic marks are intended to show where data points are on a slider, whereas otherwise, the user is left blindly to figure out where data points are.

this was originally from Bug 10988.  it was requested that this feature be resubmitted as a new bug.


tic marks always start from zero if they are present.

layout=[horizontal]|vertical
OR
layout=[horizontal-top]|horizontal-bottom|vertical-left|vertical-right 
horizontal-top being the default if layout not specified.
or, this may be shorted to
layout=vertical|[horizontal]  

and possibly an associated stylesheet property

input-range-layout:vertical|[horizontal];  default
or
input-range-layout:[horizontal-top]|horizontal-bottom|vertical-left|vertical-right;

as I specified earlier in previously mentioned bug could be possibly taken care of by the CSS3 2D Transform Module using 
transform:rotate(270deg) scale(-1); /* vertical-right? somebody may try rotate(-90deg) scale(-1); */
transform:rotate(270deg) /*scale(1)*/; /* vertical-left? somebody may try rotate(-90deg) scale(1); */
transform:/*rotate(0deg)*/ scale(-1); /* horizontal-bottom? */
/*transform:rotate(0deg) scale(1);*/ /* horizontal-top? */
but only if css3 allows negative numbers in transform:scale()!
we need basically a way to do some sort of mirroring of the control to do the left/right and top/bottom.


<input type="range" ...> proposed attributes:
-----------
ticmajorstep=integer|floatingPointNumber
ticminorstep=integer|floatingPointNumber
this also leave the possibility open for putting tic marks askew of the data points.

ticmarks=boolean
this would simply turn on tic marks at all the
steps. 
The html author can decide whether they are too "fine" (too close together) and
simply turn off the boolean.


OR

ticmajorstep=floatingPointNumber (some sort of number)
ticminorstep=floatingPointNumber (some sort of number)

The html author can decide whether they are too "fine" (too close together) and
reduce the resolution of the ticmarks by a power of 2, like 1/2 or 1/4, etc. for visual effectiveness.  and the author
knows what they want as far as tic resolution.
this also leave the possibility open for putting tic marks askew of the data points.

OR

ticmajorstep=floatingPointNumber (some sort of number)
ticstep=floatingPointNumber (some sort of number)

The html author can decide whether they are too "fine" (too close together) and
reduce the resolution of the ticmarks by a power of 2, like 1/2 or 1/4, etc. for visual effectiveness.  and the author
knows what they want as far as tic resolution.
this also leave the possibility open for putting tic marks askew of the data points.

OR

ticmajorstep=floatingPointNumber (some sort of number)
ticminor=boolean

The html author can decide whether they are too "fine" (too close together) and
reduce the resolution of the ticmarks by a power of 2, like 1/2 or 1/4, etc. for visual effectiveness.  and the author
knows what they want as far as tic resolution.


ALSO, when the list attribute is enabled,
the <option value=... label=...></option> element chould have a new attribute majortic=boolean which indicated that a major tic mark is to be enabled for this option if it is being displayed in some sort of slider control.
this part I am not sure about, since this (?) appears to be entirely built with javascript libraries and is not a standard html form control.
although it would be an intriguing form control if sliders did have this sort of control, meaning, having custom data content, such as dates, numbers, text, etc. all available in a slider selectable on a range via a datalist.
it's still on the subject of ticmarks, but fudges into a whole new subject of input type=range where data becomes a point along the slider.  currently, this is not a feature of existing browser sliders that I know of, but it is in javascript libraries.
maybe data is best left to those javascript libraries.  but this is beginning to sound like another bug.
snapping to datalist would be nice. (now that I know what that means)  I could see some definite uses for that.
should the datalist become incorporated as a new type of slider?  if so, what is an example?
<form>
<input type="text" id="t" name="time" value="00:00"><label for="t">Human readable time</label><br>
<input type="range" name="time_t" list="d" min="00:00" max="23:00" value="00:00" width="200px" 
 onchange="document.getElementById('t').value=document.getElementById('d').value;"><br>
<datalist id="d">
    <option value="00:00" label="midnight" majortic>midnight</option>
	<option value="01:00" label="1am">1am</option>
	<option value="02:00" label="2am">2am</option>
	<option value="03:00" label="3am">3am</option>
	<option value="04:00" label="4am">4am</option>
	<option value="05:00" label="5am">5am</option>
	<option value="06:00" label="6am">6am</option>
	<option value="07:00" label="7am">7am</option>
	<option value="08:00" label="8am">8am</option>
	<option value="09:00" label="9am">9am</option>
	<option value="10:00" label="10am">10am</option>
	<option value="11:00" label="11am">11am</option>
	<option value="12:00" label="noon" majortic>noon</option>
	<option value="13:00" label="1pm">1pm</option>
	<option value="14:00" label="2pm">2pm</option>
	<option value="15:00" label="3pm">3pm</option>
	<option value="16:00" label="4pm">4pm</option>
	<option value="17:00" label="5pm">5pm</option>
	<option value="18:00" label="6pm">6pm</option>
	<option value="19:00" label="7pm">7pm</option>
	<option value="20:00" label="8pm">8pm</option>
	<option value="21:00" label="9pm">9pm</option>
	<option value="22:00" label="10pm">10pm</option>
	<option value="23:00" label="11pm">1pm</option>
</datalist>
<input type="submit">
</form>

when I tried to submit css proposals to www-style, I got no responses.  but I did find something that covered what I needed.  maybe I don't know how to use the mailing list, or it's just an archive?
http://lists.w3.org/Archives/Public/www-style/

this would be a visual feature aside from "snap-to" (although it could work quite well *with* it).  
on a horizontal control, tic marks are little vertical lines drawn on the control to show where the step points are if snapping is there, and even if snapping isn't (I hope it is).
depending on the model of tic marks you choose, you could possibly choose to have tic marks drawn that are not on the step points.
there are also major tic marks, which are longer lines at (hopefully) the same points except they skip a number of points.

it could potentially
either
- put tic marks on the snap to steps
OR
- put tic marks in either a finer and/or coarser than the snap-to, actually
independent of the snap-to.  If the user makes a mistake, the snapto-grid
won't match up with the tic marks.  but it would be all up to the user. it's a possibility, but I don't see much use for it.



if snapping to steps is an issue, then there's the boolean attribute I
outlined.

A boolean called ticmarks.  this would simply turn on tic marks at all the
steps. in CSS this could be called 
input-range-ticmarks:[none];
input-range-ticmarks:display;


OR

ticmajorstep=floatingPointNumber (some sort of number)
ticminorstep=floatingPointNumber (some sort of number)
this could be implemented in CSS as 
input-range-ticmarks-majorstep:[none];
input-range-ticmarks-majorstep:num;
input-range-ticmarks-minorstep:[none];
input-range-ticmarks-minorstep:num;


OR

ticmajorstep=floatingPointNumber (some sort of number)
ticstep=floatingPointNumber (some sort of number)
this could be implemented in CSS as 
input-range-ticmarks-majorstep:[none];
input-range-ticmarks-majorstep:num;
input-range-ticmarks:[none];
input-range-ticmarks:num;


I only have a few ideas about how datalists should be displayed, since being shown a nice one.
I think the jquery datalist has minor ticmarks, which is good, but lacks major ticmarks, which would be even better.
Comment 1 Ian 'Hixie' Hickson 2010-12-29 08:25:49 UTC
I don't understand what the problem is here. The tick marks are a presentational issue; browsers are supposed to figure out where to put them based on the min, max, and step attributes, and to use the list attribute to figure out specific ticks to show.

What is the problem with that?
Comment 2 Ian 'Hixie' Hickson 2011-01-21 02:10:28 UTC
EDITOR'S RESPONSE: This is an Editor's Response to your comment. If you are satisfied with this response, please change the state of this bug to CLOSED. If you have additional information and would like the editor to reconsider, please reopen this bug. If you would like to escalate the issue to the full HTML Working Group, please add the TrackerRequest keyword to this bug, and suggest title and text for the tracker issue; or you may create a tracker issue yourself, if you are able to do so. For more details, see this document:
   http://dev.w3.org/html5/decision-policy/decision-policy.html

Status: Did Not Understand Request
Change Description: no spec change
Rationale: see comment 1
Comment 3 Jim Michaels 2011-01-21 11:31:45 UTC
often times (at least I have wanted it wherever I have seen it) for a given type of data, there is a need for major and minor tic marks to be in a range control.  this isn't always there, depending on the browser.  this would
- make sure that major and minor tic marks would be displayed if enabled regardless of browser
- ensure conformity to a specification instead of everybody doing it their own way
- I forgot my other point

min, max, and step is not enough for proper display of data.  NOBODY likes to see a slider control without proper tic marks.  have you seen a ruler without proper tic marks?  what does a ruler look like?  there are major and minor tic marks.  people expect to see the same thing with their data.  major tic marks at 10's, minor at 5's.  major at 30.0's, minor at 10.0's.  I think you get the drift.  data must have semantics to it to be readable. you don't have to display the numbers, although that would be a REALLY NICE to have and meaningful on the majors.  personally I think numbers should also be an option to add to the spec (the HTML author may find that there is not room enough to display the numbers).

why don't you ask yourself the reasons for having this feature in a browser control?

have you ever seen a micrometer or I think it was a vernier in college?  tic marks, major and minor.  pick one up or a ruler for a buck.

you just choose one of the tic mark specs.
Comment 4 Michael[tm] Smith 2011-08-04 05:36:24 UTC
mass-move component to LC1