Search results

Range in Blazor Range Selector component

The left and right thumb of RangeNavigator are used to indicate the selected range in the large collection of data. Through following ways you can select a range.

  • By dragging the thumbs.
  • By tapping on the labels.
  • By setting the start and end through value properties.

Following code example shows how to configure the selected range using Value property of RangeNavigator.

range.razor
@using Syncfusion.Blazor.Charts

<SfRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime"
                   LabelFormat="MMM-yy" IntervalType="RangeIntervalType.Years" Interval="1">
    <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

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

@code {

    public DateTime[] Value = new DateTime[] { new DateTime(2009, 01, 01), new DateTime(2010, 01, 01) };

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

    public List<Data> StockDetails = new List<Data>
{
        new Data { Date = new DateTime(2005, 01, 01), Close = 21 },
        new Data { Date = new DateTime(2006, 01, 01), Close = 24 },
        new Data { Date = new DateTime(2007, 01, 01), Close = 36 },
        new Data { Date = new DateTime(2008, 01, 01), Close = 38 },
        new Data { Date = new DateTime(2009, 01, 01), Close = 54 },
        new Data { Date = new DateTime(2010, 01, 01), Close = 57 },
        new Data { Date = new DateTime(2011, 01, 01), Close = 70 }
    };
}

Selecting Range