Class ColorRange

Represents a color range configuration for slider track segments, defining the color and position boundaries of specific track sections.

Inheritance

System.Object

ColorRange

Namespace: Syncfusion.Blazor.Inputs

Assembly: Syncfusion.Blazor.dll

Syntax

public class ColorRange : OwningComponentBase

Remarks

The ColorRange class allows you to customize different segments of the slider track with distinct colors and position ranges. This enables creating visually appealing sliders with multiple colored sections that can represent different value ranges or categories. Each color range is defined by a start position, end position, and associated color value.

Examples

A simple ColorRange implementation.

<SfSlider TValue="int[]" Value="@rangeValue" Min="0" Max="100" Type="SliderType.Range">
    <SliderColorRanges>
        <ColorRange Color="#ff0000" Start="0" End="25"></ColorRange>
        <ColorRange Color="#ffff00" Start="25" End="50"></ColorRange>
        <ColorRange Color="#00ff00" Start="50" End="75"></ColorRange>
        <ColorRange Color="#0000ff" Start="75" End="100"></ColorRange>
    </SliderColorRanges>
</SfSlider>

Constructors

ColorRange()

Declaration

public ColorRange()

Properties

Color

Gets or sets the color value for the slider track segment.

Declaration

public string Color { get; set; }

Property Value

Type	Description
System.String	A `string` representing the color value in any valid CSS color format (hex, RGB, HSL, or named colors). The default value is `null`.

Remarks

This property defines the visual color that will be applied to the slider track segment between the specified Start and End positions. The color can be specified using various CSS color formats such as hexadecimal (#FF0000), RGB (rgb(255, 0, 0)), HSL (hsl(0, 100%, 50%)), or named colors (red). If no color is specified, the default track color will be used for this segment.

Examples

Setting different color formats for ColorRange.

<ColorRange Color="#ff0000" Start="0" End="25"></ColorRange>
<ColorRange Color="rgb(255, 255, 0)" Start="25" End="50"></ColorRange>
<ColorRange Color="hsl(120, 100%, 50%)" Start="50" End="75"></ColorRange>
<ColorRange Color="blue" Start="75" End="100"></ColorRange>

End

Gets or sets the ending position of the color range on the slider track.

Declaration

public double End { get; set; }

Property Value

Type	Description
System.Double	A `double` value representing the end position within the slider's minimum and maximum range. The default value is `0`.

Remarks

This property defines where the colored track segment ends on the slider. The value should be within the slider's minimum and maximum range. The end position works in conjunction with the Start property to define the boundaries of the colored segment. The end value should typically be greater than the start value to create a valid color range. If the end value is less than or equal to the start value, the color range may not be visible or may not render as expected.

Examples

Defining end position for a color range.

<ColorRange Color="#00ff00" Start="40" End="80"></ColorRange>

Start

Gets or sets the starting position of the color range on the slider track.

Declaration

public double Start { get; set; }

Property Value

Type	Description
System.Double	A `double` value representing the start position within the slider's minimum and maximum range. The default value is `0`.

Remarks

This property defines where the colored track segment begins on the slider. The value should be within the slider's minimum and maximum range. The start position works in conjunction with the End property to define the boundaries of the colored segment. If the start value is greater than the end value, the color range behavior is undefined and may not render as expected.

Examples

Defining start position for a color range.

<ColorRange Color="#ff0000" Start="10" End="30"></ColorRange>

Methods

Dispose(Boolean)

Releases the unmanaged resources used by the ColorRange and optionally releases the managed resources.

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing	`true` to release both managed and unmanaged resources; `false` to release only unmanaged resources.

Remarks

This method performs cleanup operations for the color range component, including clearing references to the parent component and color properties. The cleanup helps prevent memory leaks and ensures proper resource management when the component is no longer needed. This method is called automatically by the component lifecycle and should not be called directly from application code.

OnInitializedAsync()

Method invoked when the component is ready to start, after having received its initial parameters from its parent in the render tree.

Declaration

protected override Task OnInitializedAsync()

Returns

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

Remarks

This method initializes the color range by storing the initial property values and registering the color range with its parent component. The method creates a new ColorRangeDataModel instance with the current property values and adds it to the parent's color range collection. This initialization ensures that the color range is properly integrated into the slider's rendering and behavior system.

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent in the render tree and the incoming values have been assigned to properties.

Declaration

protected override Task OnParametersSetAsync()

Returns

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

Remarks

This method monitors changes to the Color, Start, and End properties and updates the parent component accordingly. When any of these properties change, the method updates the corresponding entry in the parent's color range collection and notifies the parent slider to refresh its rendering. This ensures that color range modifications are immediately reflected in the slider's visual appearance.