Class SliderTicks

Represents a component that configures and renders ticks for the SfSlider<TValue> component.

Inheritance

System.Object

SliderTicks

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SliderTicks : OwningComponentBase

Remarks

The SliderTicks class provides properties to customize the appearance and behavior of ticks on the slider scale, including major and minor ticks positioning, formatting, and visibility options.

Examples

The following example demonstrates how to configure ticks for a slider component:

<SfSlider TValue="double" Min="0" Max="100" Value="30">
    <SliderTicks Placement="Placement.Before" LargeStep="10" SmallStep="5" ShowSmallTicks="true">
    </SliderTicks>
</SfSlider>

Constructors

SliderTicks()

Declaration

public SliderTicks()

Properties

Format

Gets or sets the format string used to customize the display of slider scale values.

Declaration

public string Format { get; set; }

Property Value

Type	Description
System.String	A string that specifies the format for displaying tick values. The default value is null.

Remarks

This property allows you to format the tick labels using standard or custom format strings. It supports internationalization and custom formatting through events. When set to null, the default numeric format is used.

Examples

<SliderTicks Format="C2" /> <!-- Currency format with 2 decimal places -->
<SliderTicks Format="P0" /> <!-- Percentage format with no decimal places -->

LargeStep

Gets or sets the distance between two major (large) ticks on the slider scale.

Declaration

public double LargeStep { get; set; }

Property Value

Type	Description
System.Double	A double value that represents the interval between major ticks. The default value is 10.

Remarks

This property controls the spacing of major ticks along the slider track. Major ticks are typically larger and more prominent than minor ticks, often displaying labels. The value must be greater than zero and should be a multiple of the slider's step value for optimal alignment.

Examples

<SliderTicks LargeStep="20" /> <!-- Major ticks every 20 units -->

Placement

Gets or sets the position of the ticks relative to the slider track.

Declaration

public Placement Placement { get; set; }

Property Value

Type	Description
Placement	A Placement enumeration value that specifies where ticks are positioned. The default value is After.

Remarks

This property determines the visual placement of ticks around the slider track. Available options include positioning ticks before the track, after the track, or on both sides. The placement affects both major and minor ticks uniformly.

Examples

<SliderTicks Placement="Placement.Before" /> <!-- Ticks appear before the track -->
<SliderTicks Placement="Placement.Both" />   <!-- Ticks appear on both sides -->

ShowSmallTicks

Gets or sets a value indicating whether to display minor (small) ticks on the slider scale.

Declaration

public bool ShowSmallTicks { get; set; }

Property Value

Type	Description
System.Boolean	A bool value that determines the visibility of minor ticks. The default value is false.

Remarks

When set to true, minor ticks will be displayed between major ticks based on the SmallStep interval. Minor ticks provide finer granularity and visual guidance for precise value selection. These ticks are typically smaller and less prominent than major ticks and usually don't display labels.

Examples

<SliderTicks ShowSmallTicks="true" SmallStep="2" LargeStep="10" />
<!-- Shows minor ticks every 2 units and major ticks every 10 units -->

SmallStep

Gets or sets the distance between two minor (small) ticks on the slider scale.

Declaration

public double SmallStep { get; set; }

Property Value

Type	Description
System.Double	A double value that represents the interval between minor ticks. The default value is 1.

Remarks

This property controls the spacing of minor ticks along the slider track when ShowSmallTicks is enabled. Minor ticks appear between major ticks and provide finer visual increments for more precise value selection. The value must be greater than zero and should typically be smaller than LargeStep for meaningful tick hierarchy.

Examples

<SliderTicks SmallStep="2.5" LargeStep="10" ShowSmallTicks="true" />
<!-- Minor ticks every 2.5 units, major ticks every 10 units -->

Methods

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	"Task".