Help:Slider

The `<slider>` tag creates a continuous, draggable horizontal slider that lets the user pick an integer value within a defined range. When the user finishes dragging (releases the handle), the selected value is stored in a page-state variable and any RiskModels or RiskDisplays that reference it are automatically recalculated.

Syntax

The `<slider>` tag supports these attributes:

`min`: Minimum allowed integer value (default: 0).
`max`: Maximum allowed integer value (default: 100).
`default`: (Optional) Initial value when the page loads. Must be between `min` and `max`. Defaults to halfway between min and max.
`name`: (Optional) Name of the page-state variable that will store the selected value. If omitted, the slider works visually but does not save the value or trigger calculations.

Basic syntax:

<slider min="0" max="100" default="50" name="age" />

Age:

Multiple Sliders on One Page

Each slider must have a unique `name`:

<slider min="0" max="200" default="70" name="height_cm" />
<slider min="0" max="150" default="65" name="weight_kg" />

Height:

Weight:

Behaviour

The slider shows the current value live next to the handle.
While dragging, the value updates in real time (`input` event).
When the user releases the handle (mouse up, touch end, or keyboard finish), the final value is saved to the named variable and all dependent calculations run (`change` event).
Values are always clamped to the `min`–`max` range.

Notes

The `name` attribute connects the slider to RiskModels and RiskDisplays.
If `default` is outside the `min`–`max` range, it is automatically clamped.
Negative numbers and zero are fully supported.
The slider is keyboard-accessible and works with screen readers.

Troubleshooting

No value is saved / models don’t update → Make sure the `name` attribute is present and spelled correctly. Add ?debug=1 to the page URL to see what variable RiskDisplays are waiting on.