Filtro de rango

El filtro de precio de una tienda: la barra con dos tiradores para ir a ojo, los dos números («Desde» y «Hasta») para ir al grano y, si se le pasan, un histograma con dónde está la mercancía y unos tramos habituales («Hasta 100 €»). Son la misma cosa por dos caminos, porque el ratón y el teclado no piden lo mismo.

Cuándo usarlo

• En la columna de filtros de un catálogo, junto a FilterGroup. min y max son los topes; value y onChange llevan el rango elegido.
• layout: cuántos artículos hay en cada tramo, de izquierda a derecha (el histograma). suggestions: tramos habituales; el que coincide con el rango elegido se marca solo.
• format="number" para lo que no es dinero: una talla, un peso en gramos. Por defecto es dinero, en euros; otra moneda, con currency.
• Si llegan cruzados (200 en «Desde» con 100 en «Hasta») se intercambian, en vez de dar un rango vacío. Todo se encaja en el step y en los topes.

Cuándo no

• Un valor suelto, o un rango sin campos ni histograma: Slider.
• Un número exacto en un formulario: NumberField.

Teclado: Tab pasa por los dos tiradores, los dos campos y los tramos habituales. Los tiradores se mueven un step con las flechas. Los campos confirman al salir o con Intro, no en cada tecla: escribir «1» camino de «120» no deja el catálogo en un euro. Los tramos son un grupo de radio: las flechas los recorren y eligen.

Accesibilidad: los tiradores se llaman «Desde» y «Hasta» (o fromLabel y toLabel), igual que los campos. La cabecera con el rango escrito («De 100 € a 300 €») y el histograma son decoración para el lector de pantalla: repiten lo que ya dicen los tiradores al moverse. Los tramos habituales se llaman «Precio: tramos habituales».

Contexto: va dentro de LocaleProvider (o de AmsetProvider), que decide cómo se escriben los importes.

Estados y movimiento: al pulsar un tramo habitual o escribir un número, los tiradores y el relleno se deslizan hasta su sitio; arrastrando van pegados al dedo. Las barritas crecen desde abajo al aparecer y cambian de color al entrar o salir de lo elegido. disabled (que deja data-disabled en la raíz) apaga a la vez la barra, los campos y los tramos, y las barritas pasan a gris.

Tamaños: size (sm, md por defecto, lg) va a la barra, a los dos campos, al histograma y a la cabecera; los tramos habituales van un escalón por debajo (sm, sm y md), que son atajos y no el control. variant (outline, soft o ghost) va a los dos campos.

Aspecto fino: variables CSS en .amset-filter-range: --amset-filter-range-font (la cabecera), --amset-filter-range-histogram (el alto de las barritas), --amset-filter-range-slot-segments, --amset-filter-range-radius-segment, --amset-filter-range-segment y --amset-filter-range-segment-inside (los colores de las barritas, fuera y dentro de lo elegido), --amset-filter-range-height-field y --amset-filter-range-dash (el guion entre los campos se centra en su caja y mide lo que sus cifras). La barra es un Slider, así que --amset-slider-* también vale aquí, y los campos, --amset-field-*.