Search code examples
sapui5

Two m.Slider controls, same properties, yet one doesn't show the marks

enableTickmarksis true for both slider controls, yet only one shows them?

enter image description here

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
    <Dialog title="{Title}" icon="sap-icon://create">
        <beginButton>
            <Button text="{i18n>cancel}" press="handleCloseCompetencySelection"/>
        </beginButton>
        <endButton>
            <Button type="Accept" text="{i18n>submit}" press="handleSubmitCompetencySelection"/>
        </endButton>
        <content>
            <FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
                <items>
                    <HBox><Label text="{i18n>required}: "/><Label id="RequiredProficiencyLabel" text="{ProfidrDescr}" design="Bold"/></HBox>
                    <Slider id="RequiredProficiencySlider" enabled="false" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10"
                        class="sapUiSmallMarginBottom" width="400px"/>
                </items>
            </FlexBox>
            <FlexBox direction="Column" alignItems="Center" class="sapUiMediumMarginTopBottom">
                <items>
                    <HBox><Label text="{i18n>achieved}: "/><Label id="ProficiencyLabel" text="" design="Bold"/></HBox>
                    <Slider id="ProficiencySlider" liveChange="onSliderChange" enableTickmarks="true" min="0" max="10" class="sapUiSmallMarginBottom"
                        width="400px"/>
                </items>
            </FlexBox>
            <MessageStrip text="{i18n>dragMessage}" type="Information" showIcon="true" class="sapUiMediumMargin"></MessageStrip>
        </content>
    </Dialog>
</core:FragmentDefinition>
Solution

  • There was a bug which is fixed as of version 1.52. The z-index of tickmarks was incorrectly set. Here you can see that the tickmarks are displayed correctly in Dialog: https://jsbin.com/ruqosej/edit?html,js,output