Slider

The slider stimulus allows test takers to view a series of related images (e.g., an interactive timeline map) by using a slider to switch between images.

The following demo presents a slider that displays three distinct images as the user moves the thumb to different tick marks.

To view alternative presentations and styling, use the Change Theme and Read Aloud buttons in the upper-right of the screen.

Slider Track

The slider track is light gray #F2F2F2 with a dark gray #BFBFBF border and rounded ends.

When the test taker taps or clicks the slider track, the slider thumb snaps to the snappable tick mark closest to the position of the click/tap.

Slider Thumb

The slider thumb has the following states.

  • Enabled. The default state. The thumb is a blue #0084FF circle with a diameter 1x the base font size. To meet the minimum touch target size, the thumb’s touch target diameter is 2x the base font size.
  • Hover. Visible when the cursor is over the thumb. A gray #575757 outline with 70% opacity appears around the thumb. The ew-resize cursor is displayed.
  • Active. Visible when the test taker presses down on the thumb. The thumb scales to 120% its default size.
  • Disabled. Visible when the thumb is inactive (e.g., when a modal system tool like Scratchwork is enabled). The thumb becomes gray #949494 .

While being dragged, the thumb tracks the cursor position to avoid the appearance that it is non-functional in cases where snappable tick marks are spaced far apart. As the thumb is dragged across a snappable tick mark, the slider image changes to the corresponding state. If the thumb is not released on top of a snappable tick mark, it snaps to the closest mark.

Slider Tick Marks

Static Tick Marks

Static tick marks are used to indicate a significant point on the track that does not have an image associated with it. (For example, in an interactive timeline map, there may be a date that is of interest even though the map does not change at that date.)

Static tick marks are gray #BFBFBF , are 2px wide, and extend below the bottom of the slider track.

Snappable Tick Marks

Snappable tick marks cause the slider image to change when the thumb snaps to or passes over them. In addition to a line extending below the slider track, snappable tick marks have a dot inside the slider track.

Snappable tick marks have the following states.

  • Default. The dot and line are both gray (#949494 and #BFBFBF , respectively).
  • Active. Visible when the slider thumb is being dragged. The dot darkens.
  • Selected. Visible when the slider thumb would snap to the tick mark if released. The dot enlarges and becomes blue #0084FF , and the line darkens.
  • Disabled. Visible when the tick mark is inactive (e.g., when a modal system tool like Scratchwork is enabled). The dot disappears, but the line remains visible.

Slider Tick Labels

Every tick mark has a label, regardless of whether it is static or snappable. The label is centered below the mark.

When a snappable tick mark is in the selected state, the associated label darkens and becomes bold.