New: Improve styles when prefixes / suffixes are present (fixes #591)

[swashbuck]

Fixes #591

Depends on adaptlearning/adapt-contrib-slider#234

New

• When .has-scale-step-prefix or .has-scale-step-suffix is present, scale labels switch to a lozenge (pill) shape
• The default circle style is unchanged. Only sliders with a configured prefix or suffix are affected.

Known issues

1. When scaleStepPrefix or scaleStepSuffix are configured, the first and last scale labels may extend beyond the edges of the slider widget, as the lozenge is wider than the original circle. This is expected since the amount of additional space needed depends on the length of the prefix/suffix strings.

The recommended fix is to add horizontal padding or margin to .slider__widget (or scope it to .slider__widget.has-scale-step-prefix / .has-scale-step-suffix) in a course-specific or custom theme override.

// Adjust slider widget when affixes are present
.slider__widget.has-scale-step-suffix,
.slider__widget.has-scale-step-prefix {
  @media (min-width: @slider-affix-breakpoint) {
    margin: 0 1rem;
  }
}

Testing

1. Configure a slider with scaleStepPrefix (e.g. $) and/or scaleStepSuffix (e.g. days)
2. Verify scale labels render as lozenges (pill shape) with the prefix/suffix content fitting inside
3. Verify a slider without prefix or suffix still renders labels as circles
4. Verify the selected value indicator and correct answer indicator also use the lozenge shape when prefix/suffix are set
5. Test in both LTR and RTL layouts

Posted via collaboration with Claude Code

[kirsty-hames]

Works as expected thanks 👍

For smaller screen widths, is it worth including a media query to hide the suffix/prefix by default as I imagine most use cases will overlap. For example:

.slider__scale-step-prefix,
.slider__scale-step-suffix {
  @media (max-width: @device-width-medium) {
    display: none;
  }
}

[swashbuck]

For smaller screen widths, is it worth including a media query to hide the suffix/prefix by default as I imagine most use cases will overlap.

@kirsty-hames Yep, this makes sense as there would often not be enough available space on mobile.

I've added a new variable called @slider-affix-breakpoint to control when the affixes are displayed. This also controls when to use the lozenge styles vs the circles. 86143b5

[kirsty-hames]

I've added a new variable called @slider-affix-breakpoint to control when the affixes are displayed. This also controls when to use the lozenge styles vs the circles. 86143b5

Works as expected thanks @swashbuck 👍

[github-actions]

🎉 This PR is included in version 9.34.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀