SfSlider - text labels

[Volker]

Hi there,

On your website you show these four sliders:

How did you implement the words under the ticks (red border)?

Cheers,
Volker

[Sowmiya Padmanaban]

Hi Volker,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with Slider component. We can customize the ticks value using TicksRendering method of Slider component. We have prepared simple sample for your convenience. 

 

Refer the below code snippet. 

    <div> 

        <div>Slider VALUES</div> 

        <div style="width:700px"> 

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

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

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

            </SfSlider> 

        </div> 

    </div> 

@code{  

    string[] years = new string[] { "VerPoor", "Poor", "Average", "Good", "VeryGood", "Excellent"}; 

    public void TickesRendering(SliderTickEventArgs args) 

    { 

        args.Text = years[(int)args.Value]; 

    } 

   } 

 

Refer the below screenshot. 

 

 

Refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp-949719828.zip 

 

To know more about the Slider component, refer the below links. 

 

UG Documentation-https://blazor.syncfusion.com/documentation/range-slider/getting-started/ 

 

https://blazor.syncfusion.com/documentation/range-slider/ticks/ 

 

https://blazor.syncfusion.com/documentation/range-slider/how-to/customize-slider-ticks-label/ 

 

API reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.ISlider.html 

 

Demo link- https://blazor.syncfusion.com/demos/range-slider/default/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P 

[Volker]

Hi Sowmiya,

thank you!

Let's say the range is from 0 to 10.
Is it possible to implement non-integer value-pairs like {value, name} and display a slider like:

Any idea?

Cheers,
Volker

[Sowmiya Padmanaban]

Hi Volker,  

 

We have checked requirement with Slider component. Currently, we have not provide support for render the slider Ticks for any given values in the slider limits. We have consider this as a feature request from our end. This feature will be included in any one of our upcoming release. Generally, we will plan feature based on customer count, feature rank and wishlist plan for some feature.  

  

Track the below link to know the feature status.  

 

https://www.syncfusion.com/feedback/16584/provide-option-to-position-the-ticks-for-any-given-values-in-slider-limits 

 

We appreciate your patience. 

 

 

Regards,  

Sowmiya.P