Subject of the issue/enhancement
When scaleStepPrefix or scaleStepSuffix are configured, no CSS classes are added to indicate this. Scale step labels with a prefix or suffix (e.g. "$5", "5 days") are typically longer than plain numbers, making them harder to theme without a class-based hook.
Expected behaviour
When scaleStepPrefix has a value, a modifier class such as has-scale-step-prefix should be added to the widget (or number container). Likewise, has-scale-step-suffix when scaleStepSuffix has a value. This gives theme authors a reliable selector to adjust layout, font size, or spacing for labelled scales.
Actual behaviour
The prefix/suffix values are rendered inline in the template but no modifier classes are applied anywhere. There is no CSS hook to distinguish a plain numeric scale from one with prefixes or suffixes.
Suggested implementation
Add modifier classes to slider__widget (or slider__number-container) in slider.jsx:
className={classes([
'component__widget slider__widget',
scaleStepPrefix && 'has-scale-step-prefix',
scaleStepSuffix && 'has-scale-step-suffix',
// ...existing classes
])}
Posted via collaboration with Claude Code
Subject of the issue/enhancement
When
scaleStepPrefixorscaleStepSuffixare configured, no CSS classes are added to indicate this. Scale step labels with a prefix or suffix (e.g. "$5", "5 days") are typically longer than plain numbers, making them harder to theme without a class-based hook.Expected behaviour
When
scaleStepPrefixhas a value, a modifier class such ashas-scale-step-prefixshould be added to the widget (or number container). Likewise,has-scale-step-suffixwhenscaleStepSuffixhas a value. This gives theme authors a reliable selector to adjust layout, font size, or spacing for labelled scales.Actual behaviour
The prefix/suffix values are rendered inline in the template but no modifier classes are applied anywhere. There is no CSS hook to distinguish a plain numeric scale from one with prefixes or suffixes.
Suggested implementation
Add modifier classes to
slider__widget(orslider__number-container) in slider.jsx:Posted via collaboration with Claude Code