<slider>

<slider> is an Input component that renders a draggable selection bar for graphical user input of a single value.

Attributes and Properties

Example: Default <slider>

The range for a default <slider> is from $0$ to $10$. The current value of the slider is shown, by default, in the upper left corner of the slider bar. Referencing the named slider using the $name notation renders its current value.

Example: A labeled <slider>

A <slider> can be given a <label> child, which renders above the slider to the left of the current value of the <slider>.

Attribute Example: type

<p>Choose your character:</p>
<slider name="character" type="text" showValue="false">
  <text>wizard</text>
  <text>gnome</text>
  <text>hobbit</text>
  <text>dragon</text>
</slider>
<p>You are a $character.</p>

There are two types of sliders, “number” and “text”, which can be specified using the type attribute. The text type requires <text> children, and frames them in a sequential list on the <slider> when it is rendered.

Attribute Example: initialValue

<slider name="n" initialValue="5"/>
<p>The value of the slider is: $n</p>
 
<slider name="n2" from="2" to="12"/>
<p>The value of the slider is: $n2</p>

Using the initialValue attribute, the slider can be set to an initial value occuring in the interior of the slider’s range. Without this attribute, the initial value of the slider defaults to the starting value.

Attribute Example: width

<p>Here is a custom-width slider with a value of: $n</p>
<slider name="n" width="100"/>
 
<p>The default-width slider shown below has a value of: $n2</p>
<slider name="n2"/>

The default width for a <slider> is 300 pixels, in absolute measurement; this value can be adjusted with the width attribute.

Attribute Example: labelIsName

<slider name="x" labelIsName/>

If the labelIsName attribute is specified, a default label is displayed above the slider, with the name of the slider taken as its label.

Attribute Example: showTicks

<p>Default slider:</p>
<slider name="x" labelIsName/>
 
<p>Slider with <attr>showTicks="false"</attr>:</p>
<slider name="y" showTicks="false" labelIsName/>

By default, the showTicks attribute is set to true. If showTicks is set to false, no values are rendered on the slider bar.

Attribute Example: showValue

<p>Default slider:</p>
<slider name="x" labelIsName/>
 
<p>Slider with <attr>showValue="false"</attr>:</p>
<slider name="y" showValue="false" labelIsName/>

By default, the showValue attribute is set to true, and the current value of the slider is automatically rendered directly above the bar on the left side. If showValue is set to “false”, no value is rendered above the slider bar as the user drags the point.

Attribute Example: from / to

<p>Default slider:</p>
<slider name="x"/>
 
<p>Slider with custom range:</p>
<slider name="y" from="10" to="16"/>

The from and to attributes can be used to customize the range for the <slider>. The default range is from $0$ to $10$.

Attribute Example: step

<p>Default slider:</p>
<slider name="x" from="1" to="100"/>
 
<p>Slider with custom range:</p>
<slider name="y" from="10" to="100" step="10"/>

The step attribute can be used to customize the incremental step size for the <slider>. The default step is $1$.

Property Example: Attributes as properties

The attributes of <slider> listed above are also accessible as properties.

Property Example: items

The items property of <slider> returns a list of all the possible values in the slider’s range for a text type <slider>.

Property Example: numItems

The numItems property of <slider> returns the number of possible values occuring in the slider’s range.