Selecione um intervalo de uma série de dados com duas alças, com uma pequena pré-visualização dos dados atrás delas.
Por que ajuda
- Seleção de intervalo com pré-visualização
- Duas alças
- Ótimo ao lado de gráficos
Onde se encaixa
- Dar zoom em um gráfico
- Escolher um período
- Aparar uma série
Exemplo
<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();
}Um pequeno trecho. Adicione @using RayCraft.Blazor.Components à sua página e use um modo de renderização interativo.
Incluído no RayCraft Free. Há exemplos funcionais no repositório do GitHub (MIT); ele contém código de exemplo e demonstração, não o código da biblioteca.