Elige un valor inferior y uno superior con un solo control. Ambos selectores son entradas range nativas, así que se comportan como esperan los navegadores y las tecnologías de asistencia.
Por qué ayuda
- Dos valores, un control
- Entradas range nativas
- Marcas admitidas
Dónde encaja
- Filtros de precio
- Rangos de fechas o edades
- Límites de puntuación
Ejemplo
<RangeSlider @bind-Low="_low" @bind-High="_high" Label="Price range" Min="0" Max="1000" Step="10" />
<span>From @_low to @_high</span>
@code {
private double _low = 200;
private double _high = 700;
}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.