Customization in Blazor Range Selector component

Navigator appearance

The navigator can be customized using the NavigatorStyleSettings property. The SelectedRegionColor property is used to specify the color for selected region whereas the UnSelectedRegionColor property is used to specify the color for unselected region.

appearance.razor

@using Syncfusion.Blazor.Charts

<SfRangeNavigator Value="@Value">
    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorStyleSettings UnselectedRegionColor="skyblue" SelectedRegionColor="pink"></RangeNavigatorStyleSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{

    int[] Value = new int[] { 45, 78 };

    public class Data
    {
        public double Date;
        public double Close;
    }

    public List<Data> StockDetails = new List<Data>
{
        new Data {  Date = 12, Close = 28 },
        new Data {  Date = 34, Close = 44 },
        new Data {  Date = 45, Close = 48 },
        new Data {  Date = 56, Close = 50 },
        new Data {  Date = 67, Close = 66 },
        new Data {  Date = 78, Close = 78 },
        new Data {  Date = 89, Close = 84 },
    };
}

Navigator

Thumb

The Thumb property provides options to customize the Border, Fill, Size, and Type of thumb. The types of thumb can be Circle and Rectangle.

thumb.razor

@using Syncfusion.Blazor.Charts

<SfRangeNavigator Value="@Value">
    <RangeNavigatorStyleSettings>
        <RangeNavigatorThumbSettings Type="ThumbType.Rectangle" Fill="pink">
            <RangeNavigatorThumbBorder Width="2" Color="red"></RangeNavigatorThumbBorder>
        </RangeNavigatorThumbSettings>
    </RangeNavigatorStyleSettings>

    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{

    int[] Value = new int[] { 45, 78 };

    public class Data
    {
        public double Date;
        public double Close;
    }

    public List<Data> StockDetails = new List<Data>
{
        new Data {  Date = 12, Close = 28 },
        new Data {  Date = 34, Close = 44 },
        new Data {  Date = 45, Close = 48 },
        new Data {  Date = 56, Close = 50 },
        new Data {  Date = 67, Close = 66 },
        new Data {  Date = 78, Close = 78 },
        new Data {  Date = 89, Close = 84 },
    };
}

Border customization

Using the NavigatorBorder property, you can customize the Width and Color of the range navigator.

border.razor

@using Syncfusion.Blazor.Charts

<SfRangeNavigator Value="@Value">
    <RangeNavigatorBorder Width="4" Color="Green"></RangeNavigatorBorder>

    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{

    int[] Value = new int[] { 45, 78 };

    public class Data
    {
        public double Date;
        public double Close;
    }

    public List<Data> StockDetails = new List<Data>
{
        new Data {  Date = 12, Close = 28 },
        new Data {  Date = 34, Close = 44 },
        new Data {  Date = 45, Close = 48 },
        new Data {  Date = 56, Close = 50 },
        new Data {  Date = 67, Close = 66 },
        new Data {  Date = 78, Close = 78 },
        new Data {  Date = 89, Close = 84 },
    };
}

Border

Deferred update

If the EnableDeferredUpdate property is set to true, then the changed event will be fired after dragging the slider. If the EnableDeferredUpdate is false, then the changed event will be fired when dragging the slider. By default, the EnableDeferredUpdate is set to false.

Allow snapping

The AllowSnapping property toggles the placement of the slider exactly to the left or on the nearest interval.

snap.razor

@using Syncfusion.Blazor.Charts

<SfRangeNavigator Value="@Value" AllowSnapping="true">
    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{

    int[] Value = new int[] { 45, 78 };

    public class Data
    {
        public double Date;
        public double Close;
    }

    public List<Data> StockDetails = new List<Data>
{
        new Data {  Date = 12, Close = 28 },
        new Data {  Date = 34, Close = 44 },
        new Data {  Date = 45, Close = 48 },
        new Data {  Date = 56, Close = 50 },
        new Data {  Date = 67, Close = 66 },
        new Data {  Date = 78, Close = 78 },
        new Data {  Date = 89, Close = 84 },
    };
}

Animation

The speed of the animation can be controlled using the AnimationDuration property. The default value of the AnimationDuration property is 500 milliseconds.

animation.razor

@using Syncfusion.Blazor.Charts

<SfRangeNavigator Value="@Value" AnimationDuration="3000">
    <RangeNavigatorBorder Width="4" Color="Green"></RangeNavigatorBorder>

    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

    <RangeNavigatorSeriesCollection>
        <RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area"
                              YName="Close"></RangeNavigatorSeries>
    </RangeNavigatorSeriesCollection>
</SfRangeNavigator>

@code{

    int[] Value = new int[] { 45, 78 };

    public class Data
    {
        public double Date;
        public double Close;
    }


    public List<Data> StockDetails = new List<Data>
{
        new Data {  Date = 12, Close = 28 },
        new Data {  Date = 34, Close = 44 },
        new Data {  Date = 45, Close = 48 },
        new Data {  Date = 56, Close = 50 },
        new Data {  Date = 67, Close = 66 },
        new Data {  Date = 78, Close = 78 },
        new Data {  Date = 89, Close = 84 },
    };
}