# Rango y archivo (valores y adjuntos)

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/range-file.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Contenidos · Entradas nativas

Dos entradas nativas para ajustar valores dentro de una escala o seleccionar archivos sin reemplazar el comportamiento del navegador.

v2.0

↔
## Valor continuo
Range expresa una posición dentro de límites conocidos.

⇧
## Archivo nativo
File conserva selector, teclado y permisos del sistema.

●
## Componibles
Color, borde y espaciado se añaden con utilidades.

Código + resultado

## Rango y archivo
Selecciona un control para revisar únicamente su código y resultado.

HTML

```html
<input class="q-range bc-primary" type="range" min="0" max="10" value="6" aria-label="Prioridad">
```

Resultado aplicado  Rango
Componente real

HTML

```html
<input class="q-file" type="file" accept=".pdf,.doc,.docx" aria-label="Documento adjunto">
```

Resultado aplicado  Archivo
Componente real

Construido únicamente con clases de QuicklyCSS V2 y HTML semántico.

Referencia

## Clases disponibles
La anatomía define las piezas estables; las utilidades de Quickly ajustan layout, espacio, tamaño y comportamiento responsive.

| Clase o atributo | Función | Uso recomendado |
| --- | --- | --- |
| .q-range | Control de valor continuo. | Combinar con min, max, step y value. |
| .q-file | Selector de archivos. | Combinar con accept y multiple cuando corresponda. |
| .q-field | Agrupa etiqueta y control. | Aplicar al label exterior. |
| .q-label | Etiqueta visible. | Describe el dato solicitado. |

Recomendaciones

## Buenas prácticas de Rango y archivo

01
### Límites claros
Comunica el mínimo, máximo y unidad del rango.

02
### Formatos aceptados
Usa accept como ayuda, no como única validación.

03
### Validación posterior
Comprueba tipo y tamaño del archivo también en servidor.