Referenceslider

<slider>

An interactive slider input

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

Attributes and Properties

Attributes for <slider>

Highlighted (4)

number. Default value: 0. Minimum value of the slider's range.

number. Default value: 1. Increment between successive slider positions.

number. Default value: 10. Maximum value of the slider's range.

keyword. Type of value the slider produces.

ValueDescription
number (default)Slider produces numeric values between from and to.
textSlider produces text values, one per child of the slider.
Number display (5)
avoidScientificNotation

boolean. Default value: false. Whether to render numbers in full decimal form rather than scientific notation.

displayDecimals

integer. Default value: 2. Number of decimal places to display when rendering this number.

displayDigits

integer. Default value: 3. Number of significant digits to display when rendering this number.

displaySmallAsZero

number. Default value: 1e-14. Threshold below which numbers are displayed as zero.

padZeros

boolean. Default value: false. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (1)

boolean. Default value: false. Whether to use this component's name as its rendered label.

Other (8)
bindValueTo

_componentWithSelectableType. Two-way binding target for the input's value.

height

componentSize. Default value: {"size":100,"isAbsolute":true}. Display height of the slider.

_componentWithSelectableType. Initial value of the slider before any user interaction.

rotateTickLabels

boolean. Default value: false. Whether to rotate the tick labels.

showControls

boolean. Default value: false. Whether to render play/pause controls alongside the slider.

boolean. Default value: true. Whether to render tick marks on the slider.

boolean. Default value: true. Whether to display the current value next to the slider.

componentSize. Default value: {"size":300,"isAbsolute":true}. Display width of the slider.

Common to all components (9)
copy

reference. Create an independent copy of another component by reference. Enter a references a $name.

disabled

boolean. Default value: false. Whether this component is disabled and cannot be interacted with.

extend

reference. Extend another component by reference, inheriting its children and attributes. Enter a reference as $name.

fixed

boolean. Default value: false. Whether this component's value is fixed and cannot be modified.

fixLocation

boolean. Default value: false. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

hide

boolean. Default value: false. Whether to hide this component from the rendered output.

isResponse

boolean. Default value: false. Whether this component is treated as a response for the purposes of assessment.

name

text. The name used to reference this component from elsewhere in the document.

styleNumber

integer. Default value: 1. The style number used to select this component's visual styling from the available style definitions.

Properties for <slider name="s">

Highlighted (3)
$s.from

number. Minimum value of the slider's range.

$s.step

number. Increment between successive slider positions.

$s.to

number. Maximum value of the slider's range.

Number display (5)
$s.avoidScientificNotation

boolean. Whether to render numbers in full decimal form rather than scientific notation.

$s.displayDecimals

integer. Number of decimal places to display when rendering this number.

$s.displayDigits

integer. Number of significant digits to display when rendering this number.

$s.displaySmallAsZero

number. Threshold below which numbers are displayed as zero.

$s.padZeros

boolean. Whether to pad displayed numbers with trailing zeros to fill the requested digits/decimals.

Labels (2)
$s.label

label. The label rendered with this component.

$s.labelIsName

boolean. Whether to use this component's name as its rendered label.

Other (13)
$s.disabled

boolean. Whether this component is disabled and cannot be interacted with.

$s.fixed

boolean. Whether this component's value is fixed and cannot be modified.

$s.fixLocation

boolean. Whether this component's location is fixed (preventing it from being moved while still allowing other modifications).

$s.height

componentSize. Display height of the slider.

$s.hidden

boolean. Whether this component is hidden from the rendered output.

The values the slider can take.

integer. The total number of values.

$s.rotateTickLabels

boolean. Whether to rotate the tick labels.

$s.showControls

boolean. Whether to render play/pause controls alongside the slider.

$s.showTicks

boolean. Whether to render tick marks on the slider.

$s.showValue

boolean. Whether to display the current value next to the slider.

$s.value

The current value of the slider.

$s.width

componentSize. Display width of the slider.

Common to all components (4)
$s.doenetML

text. The DoenetML source code that produced this component.

$s.hide

boolean. Whether to hide this component from the rendered output.

$s.isResponse

boolean. Whether this component is treated as a response for the purposes of assessment.

$s.styleNumber

integer. The style number used to select this component's visual styling from the available style definitions.

Examples

Example: Default <slider>

The range for a default <slider> is from 00 to 1010. 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 Examples

Attribute Example: type

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

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

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

Attribute Example: 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

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

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

The from and to attributes can be used to customize the range for the <slider>. The default range is from 00 to 1010.

Attribute Example: step

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

Property Examples

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.

signsolution