Class SfSlider<TValue>

Represents the SfSlider partial class that contains constant string values used throughout the slider component implementation.

Inheritance

System.Object

SfBaseComponent

SfSlider<TValue>

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfSlider<TValue> : SfBaseComponent, ISlider

Type Parameters

Name	Description
TValue	Specifies the type of values handled by the slider component. This can be any numeric type such as int, float, double, or decimal that supports range operations and value manipulation within the slider's minimum and maximum bounds.

Remarks

This partial class serves as a centralized repository for CSS class names, HTML attributes, theme identifiers, and other string constants that are used consistently across the SfSlider component's rendering and functionality. The constants defined here ensure maintainability and consistency in the component's HTML output and styling behavior.

The class supports generic type parameters to accommodate different numeric value types while maintaining type safety throughout the slider's value handling operations.

Examples

Basic slider with integer values and default configuration:

<SfSlider TValue="int" @bind-Value="@SliderValue" Min="0" Max="100" Step="5">
</SfSlider>
@code {
private int SliderValue = 30;
}

Range slider with dual handles for selecting value ranges:

<SfSlider TValue="int[]" Type="SliderType.Range" @bind-Value="@RangeValues" Min="0" Max="200">
    <SliderTicks Placement="Placement.After" LargeStep="25" ShowSmallTicks="true" SmallStep="5"></SliderTicks>
    <SliderTooltip IsVisible="true" ShowOn="TooltipShowOn.Hover"></SliderTooltip>
</SfSlider>
@code {
private int[] RangeValues = new int[] { 40, 160 };
}

Vertical slider with custom values and styling:

<SfSlider TValue="string" 
          Orientation="SliderOrientation.Vertical" 
          CustomValues="@(new string[] { "XS", "S", "M", "L", "XL" })"
          @bind-Value="@SelectedSize"
          CssClass="custom-slider">
</SfSlider>
@code {
private string SelectedSize = "M";
}

Constructors

SfSlider()

Declaration

public SfSlider()

Properties

CssClass

Gets or sets the custom CSS classes to be added to the slider element for styling and customization.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string containing CSS class names separated by spaces. The default value is an empty string.

Remarks

Use this property to enhance the appearance of the slider by providing one or more CSS class names, separated by spaces. These classes allow you to override or extend the default styles.

CustomValues

Gets or sets an array of custom values for the slider, which can be either numbers or strings that override the default min, max, and step behavior.

Declaration

public string[] CustomValues { get; set; }

Property Value

Type	Description
System.String[]	An array of string values that represent the custom slider values. The default value is null.

Remarks

When this property is set, the slider will use these custom values instead of calculating values based on the Min, Max, and Step properties. This is useful for creating sliders with non-linear progressions, string values, or custom scales. The values can represent any sequence such as sizes (Small, Medium, Large), ratings, or custom numeric sequences.

Examples

Creating a slider with custom string values.

<SfSlider TValue="string" CustomValues="@(new string[] { "XS", "S", "M", "L", "XL", "XXL" })" @bind-Value="@SelectedSize">
</SfSlider>

@code {
    private string SelectedSize = "M";
}

EnableAnimation

Gets or sets a value indicating whether to enable smooth animation effects when the slider handle moves.

Declaration

public bool EnableAnimation { get; set; }

Property Value

Type	Description
System.Boolean	true if animation effects are enabled; otherwise, false. The default value is true.

Remarks

When enabled, the slider handle will move smoothly with animation effects when the value changes programmatically or through user interaction. Disabling animation can improve performance in scenarios where rapid value changes occur or when animation is not desired. This property affects both handle movement and track fill animations.

Examples

Creating a slider without animation for better performance.

<SfSlider TValue="int" EnableAnimation="false" @bind-Value="@SliderValue" Min="0" Max="100">
</SfSlider>

Enabled

Gets or sets a value indicating whether the slider is enabled and interactive.

Declaration

public bool Enabled { get; set; }

Property Value

Type	Description
System.Boolean	true if the slider is enabled and allows user interaction; otherwise, false. The default value is true.

Remarks

When disabled, the slider becomes non-interactive and appears in a disabled visual state. Users cannot change the slider value through mouse, touch, or keyboard interactions when this property is set to false. The disabled state is useful for preventing modifications in certain application states or user permission levels.

Examples

Creating a disabled slider that cannot be interacted with.

<SfSlider TValue="int" Enabled="false" Value="50" Min="0" Max="100">
</SfSlider>

EnablePersistence

Gets or sets a value indicating whether to persist the component's state between page reloads.

Declaration

public bool EnablePersistence { get; set; }

Property Value

Type	Description
System.Boolean	true if state persistence is enabled; otherwise, false. The default value is false.

Remarks

When enabled, the slider will save its current value and state to browser storage and restore it when the page is reloaded. This feature is useful for maintaining user selections across browser sessions and page navigations. The persisted data includes the current value, and other relevant state information.

Examples

Enabling state persistence for the slider.

<SfSlider TValue="int" EnablePersistence="true" @bind-Value="@SliderValue" Min="0" Max="100">
</SfSlider>

EnableRtl

Gets or sets a value indicating whether to render the component in right-to-left (RTL) direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true if RTL direction is enabled; otherwise, false. The default value is false.

Remarks

When enabled, the slider layout will be mirrored to support right-to-left languages and cultures. In RTL mode, the minimum value appears on the right side and the maximum value on the left side for horizontal sliders. This property is essential for applications that need to support Arabic, Hebrew, and other RTL languages.

Examples

Enabling RTL layout for the slider.

<SfSlider TValue="int" EnableRtl="true" @bind-Value="@SliderValue" Min="0" Max="100">
</SfSlider>

ID

Gets or sets the unique HTML identifier for the slider element, enabling DOM manipulation, CSS targeting, and accessibility linking.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A langword_csharp_string representing the HTML id attribute value. When null or empty, an auto-generated unique identifier is used. Default is null.

Remarks

The ID property serves multiple purposes in web applications:

• Provides a unique DOM reference for JavaScript interop operations
• Enables CSS selectors for custom styling: #my-slider { ... }
• Supports accessibility features by linking labels: <label for="slider-id">
• Facilitates form association and validation message targeting

When not explicitly set, the component automatically generates a unique identifier in the format "sfSlider-{GUID}" to ensure DOM validity and prevent conflicts. The ID must be unique within the entire HTML document to maintain proper DOM structure and functionality.

This property is particularly valuable in scenarios involving multiple slider instances, dynamic component generation, custom theming, integration with third-party libraries, and accessibility compliance requirements.

Examples

Setting a meaningful ID for CSS targeting and accessibility:

<label for="price-range">Select Price Range:</label>
<SfSlider TValue="int[]" 
          ID="price-range" 
          Type="SliderType.Range"
          @bind-Value="@PriceRange" 
          Min="0" 
          Max="1000"
          CssClass="price-slider">
</SfSlider>
<style>
#price-range .e-slider-track { background: linear-gradient(to right, #ff6b6b, #4ecdc4); }
</style>

IsImmediateValue

Gets or sets a value indicating whether the slider value should be updated immediately during handle dragging or only when dragging ends.

Declaration

public bool IsImmediateValue { get; set; }

Property Value

Type	Description
System.Boolean	true if the value is updated immediately during handle dragging; otherwise, false to update only when dragging ends. The default value is true.

Remarks

This property controls when the Value property and ValueChanged event are updated during user interaction:

• When set to true: The value updates continuously as the user drags the handle, providing real-time feedback
• When set to false: The value updates only when the user releases the handle, reducing the frequency of value change events Setting this to false can improve performance when the value change handling is expensive or when you only need the final value.

Examples

Configuring deferred value updates for better performance.

<SfSlider TValue="int" IsImmediateValue="false" @bind-Value="@SliderValue" Min="0" Max="100">
</SfSlider>

Max

Gets or sets the maximum value that can be selected on the slider.

Declaration

public double Max { get; set; }

Property Value

Type	Description
System.Double	A double value that represents the maximum selectable value on the slider. The default value is 100.

Remarks

This property defines the upper boundary of the slider's value range. The slider handle cannot be moved beyond this maximum value. When used with the Min property, it establishes the complete range of selectable values. For range sliders, this represents the absolute maximum value for both handles.

Examples

Setting a custom maximum value for the slider.

<SfSlider TValue="double" Max="500" @bind-Value="@SliderValue" Min="0">
</SfSlider>

Min

Gets or sets the minimum value that can be selected on the slider.

Declaration

public double Min { get; set; }

Property Value

Type	Description
System.Double	A double value that represents the minimum selectable value on the slider. The default value is 0.

Remarks

This property defines the lower boundary of the slider's value range. The slider handle cannot be moved below this minimum value. When used with the Max property, it establishes the complete range of selectable values. For range sliders, this represents the absolute minimum value for both handles.

Examples

Setting a custom minimum value for the slider.

<SfSlider TValue="double" Min="10" Max="100" @bind-Value="@SliderValue">
</SfSlider>

Orientation

Gets or sets the orientation of the slider, determining whether it is rendered horizontally or vertically.

Declaration

public SliderOrientation Orientation { get; set; }

Property Value

Type	Description
SliderOrientation	A SliderOrientation enumeration value that specifies the slider orientation. The default value is Horizontal.

Remarks

The orientation affects the slider's layout and interaction behavior. In horizontal orientation, the slider extends from left to right with the minimum value on the left. In vertical orientation, the slider extends from bottom to top with the minimum value at the bottom. This property also influences how keyboard navigation works with the slider.

Examples

Creating a vertical slider.

<SfSlider TValue="int" Orientation="SliderOrientation.Vertical" @bind-Value="@SliderValue" Min="0" Max="100">
</SfSlider>

ReadOnly

Gets or sets a value indicating whether the slider is in read-only mode, preventing user interaction while displaying the current value.

Declaration

public bool ReadOnly { get; set; }

Property Value

Type	Description
System.Boolean	true if the slider is in read-only mode and cannot be modified by user interaction; otherwise, false. The default value is false.

Remarks

In read-only mode, the slider displays the current value but prevents any user interaction such as clicking, dragging, or keyboard input. This is different from the Enabled property as the slider maintains its normal visual appearance but blocks interaction. The value can still be changed programmatically even when read-only mode is enabled. This mode is useful for displaying values that should not be modified by the user.

Examples

Creating a read-only slider to display a value.

<SfSlider TValue="int" ReadOnly="true" Value="75" Min="0" Max="100">
</SfSlider>

ShowButtons

Gets or sets a value indicating whether to display increase and decrease buttons alongside the slider for precise value adjustments.

Declaration

public bool ShowButtons { get; set; }

Property Value

Type	Description
System.Boolean	true if the increase and decrease buttons should be displayed; otherwise, false. The default value is false.

Remarks

When enabled, the slider displays clickable increase (+) and decrease (-) buttons that allow users to adjust the value by the Step amount. These buttons provide an alternative input method for users who prefer precise, incremental adjustments over dragging the handle. The buttons respect the Min and Max boundaries and will be disabled when the limits are reached.

Examples

Enabling increase/decrease buttons for the slider.

<SfSlider TValue="int" ShowButtons="true" @bind-Value="@SliderValue" Min="0" Max="100" Step="5">
</SfSlider>

Slider

Gets or sets the ElementReference for the main slider container element. This reference is used for DOM manipulation and accessing the slider's HTML element.

Declaration

public ElementReference Slider { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.ElementReference	An ElementReference pointing to the slider's root DOM element.

SliderEditContext

Gets the current EditContext that provides form validation and editing services for the slider component.

Declaration

protected EditContext SliderEditContext { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.Forms.EditContext	The Microsoft.AspNetCore.Components.Forms.EditContext instance that manages validation and editing state, or null if not within a form context.

Remarks

This cascading parameter is automatically provided when the slider is placed within an EditForm or other component that establishes an editing context. The EditContext enables the slider to participate in form validation, display validation messages, and maintain editing state. This property is used internally by the component and does not typically need to be accessed by application code. When present, it allows the slider to integrate seamlessly with Blazor's form validation framework.

Step

Gets or sets the increment value for each step when the slider value changes through user interaction or button clicks.

Declaration

public double Step { get; set; }

Property Value

Type	Description
System.Double	A double value that specifies the step increment for value changes. The default value is 1.

Remarks

This property determines the granularity of value changes when users interact with the slider through various methods:

• Dragging the handle will snap to step intervals
• Clicking the increase/decrease buttons (when ShowButtons is enabled) will change the value by this step amount
• Using arrow keys will increment or decrement by this step value
• Clicking on the track will move the handle to the nearest step position The step value should be a positive number and typically divides evenly into the range between Min and Max.

Examples

Setting a custom step value for more precise control.

<SfSlider TValue="double" Step="0.5" @bind-Value="@SliderValue" Min="0" Max="10">
</SfSlider>

Ticks

Gets or sets the configuration options for slider tick marks, including their placement, step values, and formatting.

Declaration

public SliderTicks Ticks { get; set; }

Property Value

Type	Description
SliderTicks	A SliderTicks object that defines the tick mark configuration options. The default value is a new instance with default settings.

Remarks

Tick marks provide visual indicators along the slider track to help users understand the scale and available values. The SliderTicks configuration allows you to control:

• The placement of tick marks (before, after, or both sides of the track) using the Placement property
• The step interval for displaying major ticks using the LargeStep property
• The step interval for displaying minor ticks using the SmallStep property
• Show or hide small tick marks using the ShowSmallTicks property
• Custom formatting for tick labels using the Format property Tick marks enhance the user experience by providing visual reference points and making it easier to select specific values. The tick marks automatically respect the slider's orientation and RTL settings.

Examples

Configuring tick marks for the slider.

<SfSlider TValue="int" @bind-Value="@SliderValue" Min="0" Max="100">
    <SliderTicks Placement="Placement.After" LargeStep="20" SmallStep="5" ShowSmallTicks="true"></SliderTicks>
</SfSlider>

Type

Gets or sets the type of slider behavior, determining whether it supports single value selection, minimum range display, or range selection.

Declaration

public SliderType Type { get; set; }

Property Value

Type	Description
SliderType	A SliderType enumeration value that specifies the slider behavior type. The default value is Default.

Remarks

The slider type determines the interaction model and visual appearance:

• Default: Standard single-value slider with one handle
• MinRange: Single-value slider that displays a filled track from the minimum value to the current value
• Range: Dual-handle slider that allows selection of a value range with filled track between the handles When using Range, the Value property should be bound to an array containing the start and end values of the range.

Examples

Creating a range slider for selecting a value range.

<SfSlider TValue="int[]" Type="SliderType.Range" @bind-Value="@RangeValues" Min="0" Max="100">
</SfSlider>

@code {
    private int[] RangeValues = new int[] { 20, 80 };
}

Value

Gets or sets the current value of the slider.

Declaration

public TValue Value { get; set; }

Property Value

Type	Description
TValue	The current value of the slider of type TValue. For range sliders, this should be an array containing the start and end values. The default value is the default value of TValue.

Remarks

The value type and structure depends on the Type property:

• For Default and MinRange: A single value of type TValue
• For Range: An array of TValue with two elements representing the range start and end values The value must fall within the bounds defined by the Min and Max properties. Value changes trigger the ValueChanged event callback.

Examples

Binding a single value to the slider.

<SfSlider TValue="int" @bind-Value="@SliderValue" Min="0" Max="100">
</SfSlider>

@code {
    private int SliderValue = 50;
}

ValueChanged

Gets or sets an event callback that is invoked when the slider value changes.

Declaration

public EventCallback<TValue> ValueChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<TValue>	An Microsoft.AspNetCore.Components.EventCallback<> that is triggered when the slider value changes. The callback receives the new value of type TValue.

Remarks

This event is raised when the slider value is changed through user interaction or programmatic updates. The callback receives the new value, which can be a single value or an array depending on the Type property. The timing of this event depends on the IsImmediateValue property:

• When true: The event fires immediately during handle dragging
• When false: The event fires only when the user releases the handle This event is essential for two-way data binding with the @bind-Value directive.

Examples

Handling slider value changes.

<SfSlider TValue="int" Value="@SliderValue" ValueChanged="@OnSliderValueChanged" Min="0" Max="100">
</SfSlider>

@code {
    private int SliderValue = 30;

    private void OnSliderValueChanged(int newValue)
    {
        SliderValue = newValue;
        // Handle the value change
    }
}

Width

Gets or sets the width of the slider component.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A string that specifies the width using CSS length units (e.g., "300px", "50%", "10em"). The default value is null.

Remarks

This property allows you to control the horizontal dimension of the slider component. You can specify the width using various CSS units such as pixels (px), percentages (%), em, rem, etc. If not specified, the slider will use its default width based on the parent container and CSS styles. For vertical sliders, this property controls the width of the entire slider component container.

Examples

Setting a custom width for the slider.

<SfSlider TValue="int" Width="400px" @bind-Value="@SliderValue" Min="0" Max="100">
</SfSlider>

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

CloseTooltip()

Closes the currently displayed tooltip unless it's configured to always show. Called from JavaScript when tooltips should be hidden due to user interaction or focus changes.

Declaration

public Task CloseTooltip()

Returns

Type	Description
System.Threading.Tasks.Task	A task representing the asynchronous tooltip closing operation.

GetDataId()

Gets the unique identifier for this slider instance used for JavaScript interop and DOM element identification.

Declaration

public string GetDataId()

Returns

Type	Description
System.String	A string containing the unique data identifier for this slider component.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered, handling post-render initialization and updates.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true for the first time component rendering; otherwise gets false.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous post-render operation.

Overrides

SfBaseComponent.OnAfterRenderAsync(Boolean)

Remarks

This method performs different operations based on the render state:

First Render Operations:

• Configures tooltip positioning based on orientation and placement settings
• Triggers the Created event if SliderEvents.Created has delegates
• Updates CSS classes for tick placement when ticks are enabled

Subsequent Render Operations:

• Handles tick content repositioning when IsTickContentChanged is true
• Updates color range properties when IsColorRangeChanged is true

The method ensures proper component state management and visual updates after each render cycle.

OnInitializedAsync()

Method invoked when the component is ready to start, performing initial setup and configuration.

Declaration

protected override Task OnInitializedAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous initialization operation.

Overrides

SfBaseComponent.OnInitializedAsync()

Remarks

This method performs critical initialization tasks including:

• Validates slider type compatibility with the provided value type
• Configures locale settings and generates component identifiers
• Sets up HTML attributes and CSS classes based on component properties
• Initializes persistence values if EnablePersistence is true
• Configures RTL support, button visibility, and orientation-specific styling

The method throws System.InvalidOperationException if Range slider type validation fails.

Exceptions

Type	Condition
System.InvalidOperationException	Thrown when Type is Range but the Value is not an array, or when the array has fewer than two elements.

OnOpen(TooltipEventArgs)

Handles tooltip open events and updates tooltip positioning for Material themes. This method is called when a tooltip is opened and adjusts positioning as needed.

Declaration

public Task OnOpen(TooltipEventArgs args)

Parameters

Type	Name	Description
TooltipEventArgs	args	The tooltip event arguments containing positioning and display information.

Returns

Type	Description
System.Threading.Tasks.Task	A task representing the asynchronous tooltip positioning operation.

OnParametersSetAsync()

Method invoked when any changes in component state occur, handling parameter updates and property synchronization.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous parameter update operation.

Remarks

This method is called whenever component parameters change and handles:

• Property change notifications for all slider properties
• Synchronization between internal state and public properties
• Persistence storage updates when EnablePersistence is enabled
• Dynamic property change processing through DynamicPropertyChange

The method ensures that all property changes are properly tracked and applied to maintain component consistency. It clears the PropertyChanges collection after processing to prepare for subsequent updates.

RepositionAsync()

Repositions the slider handle and updates its position within the container.

Declaration

public Task RepositionAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing the asynchronous operation of repositioning the slider.

Remarks

This method can be invoked when the slider is rendered within a popup container or when the slider dimensions change dynamically. It ensures that the slider handle is correctly positioned based on the current container dimensions and slider properties. This is particularly useful when the slider's parent container changes size or visibility state.

Examples

The following example demonstrates how to use the RepositionAsync method:

@using Syncfusion.Blazor.Inputs

<SfSlider @ref="sliderObj" TValue="int" Value="30" Min="0" Max="100"></SfSlider>
<SfButton @onclick="RepositionSlider">Reposition Slider</SfButton>

@code {
    SfSlider<int> sliderObj;

    private async Task RepositionSlider()
    {
        await sliderObj.RepositionAsync();
    }
}

TriggeredTicksRendered(ElementReference, Dictionary<String, Object>)

Triggers the TicksRendered event after slider ticks have been rendered in the DOM. Provides access to all tick elements and the container for custom post-render operations.

Declaration

public Task<SliderTickRenderedEventArgs> TriggeredTicksRendered(ElementReference ticksWrapperRef, Dictionary<string, object> attributes)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.ElementReference	ticksWrapperRef	The ElementReference of the ticks container wrapper.
System.Collections.Generic.Dictionary<System.String, System.Object>	attributes	HTML attributes applied to the ticks container.

Returns

Type	Description
System.Threading.Tasks.Task<SliderTickRenderedEventArgs>	The event arguments object containing tick references and attributes, potentially modified by event handlers.

TriggeredTicksRendering(ElementReference, String, Double, Dictionary<String, Object>)

Triggers the TicksRendering event before individual tick elements are rendered. Allows customization of tick display text, values, and HTML attributes before rendering.

Declaration

public Task<SliderTickEventArgs> TriggeredTicksRendering(ElementReference ticksRef, string text, double value, Dictionary<string, object> attributes)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.ElementReference	ticksRef	The ElementReference of the individual tick element being rendered.
System.String	text	The default text content to display for this tick.
System.Double	value	The slider value associated with this tick position.
System.Collections.Generic.Dictionary<System.String, System.Object>	attributes	HTML attributes to be applied to this tick element.

Returns

Type	Description
System.Threading.Tasks.Task<SliderTickEventArgs>	The event arguments object containing tick properties that may be modified by event handlers.