CTATNumberLine Example

Some CTATNumberLine examples that show some of its basic functionality.

CTATNumberLine with default settings:

<div id="numberLineDefault" class="CTATNumberLine">
</div>

Setting minimum and maximum values:

<div id="numberLineMinMax" class="CTATNumberLine"
     data-ctat-minimum="-2"
     data-ctat-maximum="2"
     data-ctat-enabled="false">
</div>

Setting step values:

<div id="numberLineStep" class="CTATNumberLine"
     data-ctat-enabled="false"
     data-ctat-minimum="0"
     data-ctat-maximum="1"
     data-ctat-large-tick-step="0.4"
     data-ctat-small-tick-step="1/3">
</div>

Please note that the tick mark labels can display either decimals or fractions depending on the values of the data-ctat-*-tick-step attribute. If fractions in the form of 1/3 are used, then the labels will also be fractions.

Also, if different tick marks overlap, then the largest tick mark will be displayed. For example in the default example, at 1, the large tick mark is "1" while the small tick mark would be "2/2" and "1" is displayed

Setting denominator:

<div id="numberLineDenom" class="CTATNumberLine"
     data-ctat-enabled="false"
     data-ctat-minimum="0"
     data-ctat-maximum="1"
     data-ctat-large-tick-step="0"
     data-ctat-small-tick-step="1"
     data-ctat-denominator="4">
</div>

data-ctat-denominator is different from the other tick mark parameters in that it shows tick marks at an interval of 1/value. This is often used in conjunction with data-ctat-ctrl-denominator.

Setting point size:

<div id="numberLinePoint" class="CTATNumberLine"
     data-ctat-minimum="0"
     data-ctat-maximum="1"
     data-ctat-large-tick-step="0"
     data-ctat-small-tick-step="1"
     data-ctat-tutor="false"
     data-ctat-point-size="12">
</div>

This setting will adjust both the point cursor and the drawn points.

Setting snap to tickmarks:

<div id="numberLineSnap" class="CTATNumberLine"
     data-ctat-minimum="0" data-ctat-maximum="1"
     data-ctat-large-tick-step="1"
     data-ctat-small-tick-step="1/3"
     data-ctat-snap="true">
</div>

When data-ctat-snap="true", CTATNumberLine will report the value of the tick mark as the input in the posted SAI.

Setting rotation:

<div id="numberLineRot" class="CTATNumberLine"
     data-ctat-tutor="false"
     data-ctat-rotation="60">
</div>

Rotate the number line clockwise around the center point in degrees.

Controlling minimum and maximum:

Minimum:

Maximum:

<div id="numberLineRot" class="CTATNumberLine"
     data-ctat-minimum="0"
     data-ctat-maximum="3"
     data-ctat-ctrl-min="numberLineBounds_min"
     data-ctat-ctrl-max="numberLineBounds_max">
</div>

If you are using something like a CTATNumericSpinner, do not forget to set its value and the corresponding CTATNumberLine attribute to the same initial value.

Controlling tick marks:

Large:

−

Small:

Denominator:

<div id="numberLineRot" class="CTATNumberLine"
     data-ctat-tutor="false"
     data-ctat-enabled="false"
     data-ctat-minimum="0"
     data-ctat-maximum="3"
     data-ctat-large-tick-step="1"
     data-ctat-small-tick-step="1/2"
     data-ctat-ctrl-large-tick="nlTick_inc;nlTick_dec"
     data-ctat-ctrl-small-tick="nlTick_small"
     data-ctat-ctrl-denominator="nlTick_denom">
</div>

If you are using something like a CTATNumericSpinner, do not forget to set its value and the corresponding CTATNumberLine attribute to the same initial value.

Setting multi-point entry:

<div id="numberLineNumPoints" class="CTATNumberLine"
	  data-ctat-max-points="3"></div>