Class SliderEvents<TValue>

Configure handlers to handle the events of the Slider component.

Inheritance

System.Object

SliderEvents<TValue>

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class SliderEvents<TValue> : OwningComponentBase

Type Parameters

Name	Description
TValue	The type of the slider value.

Remarks

The SliderEvents<TValue> class provides event callback properties that allow you to respond to various slider interactions and state changes. This class is used as a child component within the SfSlider<TValue> component to define event handlers.

Examples

The following example demonstrates how to configure slider events:

<SfSlider TValue="int" Value="30" Min="0" Max="100">
    <SliderEvents TValue="int" 
        OnChange="@OnSliderChange"
        ValueChange="@OnValueChanged"
        Created="@OnSliderCreated" />
</SfSlider>

@code {
    private void OnSliderChange(SliderChangeEventArgs<int> args)
    {
        // Handle slider change during dragging
    }

    private void OnValueChanged(SliderChangeEventArgs<int> args)
    {
        // Handle final value change after dragging
    }

    private void OnSliderCreated(object args)
    {
        // Handle slider creation
    }
}

Constructors

SliderEvents()

Declaration

public SliderEvents()

Properties

Created

Triggers when the Slider is successfully created.

Declaration

public EventCallback<object> Created { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An event callback function that receives an object parameter.

Remarks

This event fires once when the slider component has been fully initialized and rendered in the DOM. Use this event to perform initialization tasks that require the slider to be fully created, such as setting focus, calculating dimensions, or configuring additional functionality that depends on the slider's rendered state. This is the ideal place to execute code that needs to run after the component is ready for user interaction.

Examples

The following example shows how to handle the Created event:

<SfSlider TValue="int" Value="75" Min="0" Max="100">
    <SliderEvents TValue="int" Created="@OnSliderCreated" />
</SfSlider>

@code {
    private void OnSliderCreated(object args)
    {
        // Perform post-creation initialization
        Console.WriteLine("Slider has been successfully created and is ready for interaction");
        // Additional setup logic can be added here
    }
}

Destroyed

Triggers when the component is destroyed.

Declaration

public EventCallback<object> Destroyed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Object>	An event callback function that receives an object parameter.

Remarks

This event fires when the slider component is being disposed or removed from the DOM. Use this event to perform cleanup operations such as unsubscribing from events, disposing of resources, clearing timers, or saving state information before the component is destroyed. This is the appropriate place to handle any necessary cleanup to prevent memory leaks and ensure proper resource disposal.

Examples

The following example shows how to handle the Destroyed event for cleanup:

<SfSlider TValue="int" Value="60" Min="0" Max="100">
    <SliderEvents TValue="int" Destroyed="@OnSliderDestroyed" />
</SfSlider>

@code {
    private void OnSliderDestroyed(object args)
    {
        // Perform cleanup operations
        Console.WriteLine("Slider component is being destroyed");

        // Clear any timers, unsubscribe from events, dispose resources
        // Example: timer?.Dispose();
        // Example: eventSubscription?.Dispose();
    }
}

OnChange

Triggers whenever the Slider value changes while dragging the slider thumb.

Declaration

public EventCallback<SliderChangeEventArgs<TValue>> OnChange { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SliderChangeEventArgs<TValue>>	An event callback function that receives SliderChangeEventArgs<T> as parameter.

Remarks

This event fires continuously during the dragging operation, providing real-time feedback of the slider value changes. Use this event for immediate response to value changes, such as updating UI elements or performing calculations based on the current slider position. Note that this event may fire frequently during dragging operations, so consider performance implications for complex operations.

Examples

The following example shows how to handle the OnChange event:

<SfSlider TValue="int" Value="50" Min="0" Max="100">
    <SliderEvents TValue="int" OnChange="@HandleSliderChange" />
</SfSlider>

@code {
    private void HandleSliderChange(SliderChangeEventArgs<int> args)
    {
        Console.WriteLine($"Current value: {args.Value}");
        // Perform real-time updates based on slider position
    }
}

OnTooltipChange

Triggers when the Slider tooltip value is changed.

Declaration

public EventCallback<SliderTooltipEventArgs<TValue>> OnTooltipChange { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SliderTooltipEventArgs<TValue>>	An event callback function that receives SliderTooltipEventArgs<T> as parameter.

Remarks

This event fires when the tooltip content is about to be displayed or updated, allowing you to customize the tooltip text and format. Use this event to provide custom formatting for tooltip values, add units or prefixes, or implement conditional tooltip content based on the current slider value. The event provides access to both the current value and the tooltip text, enabling dynamic tooltip customization. This is particularly useful for displaying formatted values, currency, percentages, or other custom representations in the tooltip.

Examples

The following example demonstrates customizing tooltip content:

<SfSlider TValue="double" Value="75.5" Min="0" Max="100" Step="0.1">
    <SliderTooltip IsVisible="true" Placement="TooltipPlacement.Top" />
    <SliderEvents TValue="double" OnTooltipChange="@CustomizeTooltip" />
</SfSlider>

@code {
    private void CustomizeTooltip(SliderTooltipEventArgs<double> args)
    {
        // Customize tooltip to show percentage with custom formatting
        args.Text = $"{args.Value:F1}% Complete";

        // Add conditional styling or content based on value
        if (args.Value >= 90)
            args.Text += " ✓";
    }
}

TicksRendered

Triggers when the ticks are rendered on the Slider.

Declaration

public EventCallback<SliderTickRenderedEventArgs> TicksRendered { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SliderTickRenderedEventArgs>	An event callback function that receives SliderTickRenderedEventArgs as parameter.

Remarks

This event fires after the slider ticks have been rendered on the slider track. Use this event to perform operations that depend on the ticks being fully rendered, such as applying custom styling, adding tooltips to specific tick marks, or performing calculations based on tick positions. This event is particularly useful when you need to interact with the rendered tick elements or perform post-rendering customizations.

Examples

The following example demonstrates handling the TicksRendered event:

<SfSlider TValue="int" Value="50" Min="0" Max="100">
    <SliderTicks Placement="PlacementPosition.After" LargeStep="25" SmallStep="5" ShowSmallTicks="true" />
    <SliderEvents TValue="int" TicksRendered="@OnTicksRendered" />
</SfSlider>

@code {
    private void OnTicksRendered(SliderTickRenderedEventArgs args)
    {
        Console.WriteLine("Slider ticks have been rendered");
        // Perform post-tick-rendering operations
        // Apply custom styles or add interactivity to ticks
    }
}

TicksRendering

Triggers when the ticks elements are being rendered in the Slider, which is used to customize the ticks labels dynamically.

Declaration

public EventCallback<SliderTickEventArgs> TicksRendering { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SliderTickEventArgs>	An event callback function that receives SliderTickEventArgs as parameter.

Remarks

This event fires before each tick is rendered, allowing you to customize the appearance and content of individual tick labels. Use this event to modify tick text, apply conditional formatting, or change tick visibility based on custom logic. This is the primary mechanism for dynamic tick customization and is called for each tick during the rendering process. You can access and modify tick properties such as text, value, and styling through the event arguments.

Examples

The following example shows how to customize tick labels using the TicksRendering event:

<SfSlider TValue="int" Value="50" Min="0" Max="100">
    <SliderTicks Placement="PlacementPosition.After" LargeStep="20" ShowSmallTicks="false" />
    <SliderEvents TValue="int" TicksRendering="@CustomizeTickLabels" />
</SfSlider>

@code {
    private void CustomizeTickLabels(SliderTickEventArgs args)
    {
        // Customize tick labels with custom text
        if (args.Value == 0) args.Text = "Min";
        else if (args.Value == 100) args.Text = "Max";
        else if (args.Value == 50) args.Text = "Mid";
        else args.Text = $"{args.Value}%";
    }
}

ValueChange

Triggers when the Slider value is changed after the dragging of slider thumb is completed.

Declaration

public EventCallback<SliderChangeEventArgs<TValue>> ValueChange { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<SliderChangeEventArgs<TValue>>	An event callback function that receives SliderChangeEventArgs<T> as parameter.

Remarks

This event fires once when the user completes the dragging operation and releases the slider thumb. Unlike OnChange, this event provides the final committed value and is ideal for operations that should occur only after the user has finished adjusting the slider. Use this event for actions like saving data, triggering API calls, or updating bound properties that shouldn't change continuously during dragging.

Examples

The following example demonstrates handling the ValueChange event:

<SfSlider TValue="double" @bind-Value="@sliderValue" Min="0" Max="100">
    <SliderEvents TValue="double" ValueChange="@OnValueChanged" />
</SfSlider>

@code {
    private double sliderValue = 25.0;

    private async Task OnValueChanged(SliderChangeEventArgs<double> args)
    {
        sliderValue = args.Value;
        // Save the final value or trigger other completion actions
        await SaveSliderValue(args.Value);
    }
}

Methods

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration

protected override Task OnInitializedAsync()

Returns

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

Remarks

This method is called when the component is being initialized and is used to set up the parent-child relationship between the SliderEvents<TValue> and its parent SfSlider<TValue> component. It ensures that the slider component has a reference to its events configuration.