Skip to content

Improve styles when prefixes / suffixes are present #591

@swashbuck

Description

@swashbuck

Subject of the issue/enhancement

Slider scale labels (.slider__number, .slider__number-selection, .slider__number-model-answer) are currently styled as fixed-size circles (2.5rem x 2.5rem, border-radius: 50%). This works fine for plain numbers, but when scaleStepPrefix or scaleStepSuffix are configured (e.g. $5, 5 days), the text overflows the circle.

adapt-contrib-slider#233 introduced has-scale-step-prefix and has-scale-step-suffix modifier classes on .slider__widget (landed in adapt-contrib-slider#234), providing a CSS hook for exactly this case.

Expected behaviour

When .has-scale-step-prefix or .has-scale-step-suffix is present on .slider__widget, the scale labels should switch to a lozenge (pill) shape — width: auto, horizontal padding, and a pill border-radius — so the prefix/suffix content fits comfortably without overflowing.

The default circle style should remain unchanged for sliders without a prefix or suffix.

Actual behaviour

No conditional styling exists. Labels overflow when prefix/suffix content is wider than 2.5rem.

Depends on adapt-contrib-slider#234

Posted via collaboration with Claude Code

Metadata

Metadata

Assignees

Type

Projects

Status

Recently Released

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions