W3C home > Mailing lists > Public > public-html@w3.org > October 2010

[Bug 11127] New: tic marks for <input type="range">

From: <bugzilla@jessica.w3.org>
Date: Fri, 22 Oct 2010 18:29:14 +0000
To: public-html@w3.org
Message-ID: <bug-11127-2495@http.www.w3.org/Bugs/Public/>
http://www.w3.org/Bugs/Public/show_bug.cgi?id=11127

           Summary: tic marks for <input type="range">
           Product: HTML WG
           Version: unspecified
          Platform: PC
        OS/Version: Windows XP
            Status: NEW
          Severity: enhancement
          Priority: P2
         Component: HTML5 spec (editor: Ian Hickson)
        AssignedTo: ian@hixie.ch
        ReportedBy: jmichae3@yahoo.com
         QAContact: public-html-bugzilla@w3.org
                CC: mike@w3.org, public-html-wg-issue-tracking@w3.org,
                    public-html@w3.org


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.

-- 
Configure bugmail: http://www.w3.org/Bugs/Public/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are on the CC list for the bug.
Received on Friday, 22 October 2010 18:29:16 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 9 May 2012 00:17:16 GMT