Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customization in Blazor Range Selector component

08 Apr 2021 / 1 minute to read

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
Copied to clipboard
@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 { get; set; }
        public double Close { get; set; }
    }

    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
Copied to clipboard
@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 { get; set; }
        public double Close { get; set; }
    }

    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 },
    };
}

Thumb

Border customization

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

border.razor
Copied to clipboard
@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 { get; set; }
        public double Close { get; set; }
    }

    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

Allow snapping

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

snap.razor
Copied to clipboard
@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 { get; set; }
        public double Close { get; set; }
    }

    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 },
    };
}

See Also

Previous
Next