Skip to content
Moodle Design Systemby Didactika
Moodle 5.3 LTS
v0.1
EN
Bootstrap components
Didactika theme v0.1

Range

A slider for a value on a scale where the exact number matters less than the position.

A range picks a value between a minimum and a maximum by dragging. Use it when the user compares positions (volume, opacity, a pass mark) and show the number beside it, because a slider is not precise.

When to use it

Use it

  • Set min, max and step so the values make sense.
  • Show the current value next to the slider.
  • A label, linked with for and id.

Don't

  • Use it for a value the user must type exactly; use a number field.
  • Use it for a few named options; use radios.
  • Restyle the track or the thumb in a plugin.

Anatomy

A range has a label, a track and a thumb. The value is not drawn by the control: write it beside it.

Variants and states

Range
RestHoverFocusDisabled
range
Range with label

Combinations

Combination Use it for
Range + value Show the number next to the slider; a slider alone is not precise.
Range + number field When people sometimes need the exact value, put a number field beside it.
Range × disabled The thumb turns grey and the track stays, so the value is still readable.

What Didactika changes and why

What we changed Why it helps
A thin rounded track and a round thumb with a white border The thumb stays visible on any track colour and is big enough to grab.
The thumb is the primary colour and grows a ring on focus The keyboard user sees which slider has the focus and where the thumb is.

Classes

Class What it does
form-rangecustom-range The slider
min, max, step Attributes of the scale

In this version

Bootstrap 5.3 draws the focus as a soft ring and keeps every colour in CSS variables (--bs-*), so a theme recolours a control with one variable. The thumb and the track follow the theme colour.

Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. The class is custom-range.

Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. The class is custom-range.

Accessibility

  • Arrows, Home, End and Page keys work on the native element.
  • The value is read by screen readers; if you also show it, mark it aria-hidden or link it with aria-describedby.
  • Do not rely on dragging only: allow a keyboard path.