Selecciona un intervalo de una serie de datos con dos controles, con una pequeña vista previa de los datos detrás.
Por qué ayuda
- Selección de intervalo con vista previa
- Dos controles
- Ideal junto a gráficos
Dónde encaja
- Ampliar un gráfico
- Elegir un periodo
- Recortar una serie
Ejemplo
<div class="doc-stack" style="max-width:36rem">
<RangeSelector Label="Period" Values="_values" Categories="_months" @bind-Low="_low" @bind-High="_high" />
<span>Total for the selected months: @Total.ToString("N0")</span>
</div>
@code {
private readonly double[] _values = [120, 135, 150, 142, 160, 180, 210, 205, 190, 170, 150, 175];
private readonly string[] _months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
private double _low = 2;
private double _high = 7;
private double Total => _values.Skip((int)_low).Take((int)_high - (int)_low + 1).Sum();
}Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.