Tick and lable mispoition

[Martin]

I have a simple three position slider to enable users to enter three wind speeds , still, light & strong which works great except that the strong marker and tick flick to teh next line as shown in the image attached.  The slider is embedded in bootstrap controlled layout as shown in the code snipet below. 

                                        <div class="row">

                                            <div class="col-sm-4">Wind</div>

                                            <div class="col-sm-4">

                                                    <SfSlider ID="dynamic_color_slider" TValue="int" Min="0" Max="2" Type="SliderType.MinRange">

                                                        <SliderEvents TValue="int" TicksRendering="@TickesRendering"></SliderEvents>

                                                        <SliderTicksData Placement="Placement.After" LargeStep="1"></SliderTicksData>

                                                    </SfSlider>

                                            </div>

                                        </div>

Attachment: BrokenSlider_fa0b5cf9.zip

[Sharon Sanchez Selvaraj]

Hi Martin, 

Greetings from Syncfusion Support. 

We have checked with your sample. But we were unable to replicate the issue from our end. 

Please check with the modified sample code similar to your scenario. 

@using Syncfusion.Blazor.Inputs 

<div class="row"> 

    <div class="col-sm-4">Wind</div> 

    <div class="col-sm-4"> 

        <SfSlider ID="dynamic_color_slider" TValue="int" Min="0" Max="2" Type="SliderType.MinRange"> 

            <SliderEvents TValue="int" TicksRendering="@TickesRendering"></SliderEvents> 

            <SliderTicksData Placement="Placement.After" LargeStep="1"></SliderTicksData> 

        </SfSlider> 

    </div> 

</div> 

@code{ 

    public void TickesRendering(SliderTickEventArgs args) 

    { 

        args.Text = args.Text + ".5%"; 

    } 

} 

If the issue persists, please provide the following details so that we can assist you promptly. 

1. Package version used.
2. Video recording on the issue.
3. Else modify the sample with steps to reproduce the issue.

Please get back to us if you need further assistance. 

Regards, 

Sharon Sanchez S. 

[Bas]

Hi Martin,

Don't know if you still have this issue. I had it to and found that I had to change the e-scale css class to display flex, this because for some weird reason it took something different and than left spaces between the li elements making up the scale. So if you try this it should return back to normal again. 

Kind regards