CmSlider
Controle de faixa para valores contínuos — volume, brilho, tamanho de swap, qualidade de compressão. Trilha e alça são o <input type="range"> nativo estilizado, não uma div com eventos de ponteiro: teclado, toque, roda do mouse, RTL e leitor de tela vêm de graça e corretos.
Import
import { CmSlider } from "cosmemilton-ui/client";Controlado e não controlado
label, showValue e valueFormat — e a mesma faixa sem estado, só com defaultValue.
Memória e vídeo
Ajustes gravados no perfil desta máquina.
Menor que a RAM instalada: a hibernação fica indisponível.
Tamanhos, tons e adornos
size, tone, ícones nas pontas, srOnlyLabel e o estado desabilitado.
Preferências do dispositivo
Cada controle tem tamanho e tom conforme o peso do ajuste.
Nenhum touchpad detectado nesta máquina.
Marcas e passo
marks com e sem rótulo, min/max/step não triviais e o valor formatado por extenso.
Política de backup
Compressão e retenção dos instantâneos noturnos.
Compressão que termina dentro da janela de manutenção.
API rápida
Props principais de cada peça exportada.
CmSlider
CmSliderMark
Notas
O preenchimento à esquerda da alça é um gradiente parado em --cm-slider-fill, calculado no componente — nenhum navegador expõe a parte "antes da alça" da trilha nativa de forma portátil. Por isso o preenchimento acompanha o valor mesmo no modo não controlado.
onChange recebe (value: number, event): o número já convertido, não o event.target.value em string.
O cabeçalho visual (rótulo + valor) é aria-hidden de propósito: o nome e o valor acessíveis já saem do <input>, e repeti-los faria o leitor de tela anunciar duas vezes.
valueFormat formata o valor exibido e, quando devolve string, vira também o aria-valuetext — é como "70" passa a ser ouvido como "70%" ou "1,4 GB".
srOnlyLabel mantém label como nome acessível sem renderizar texto visível. Sem label, o componente cai no aria-label que você passar.
marks aceita número solto (marca sem rótulo) ou { value, label }; as marcas são aria-hidden, porque a informação delas já está no valor do input.
size (sm/md/lg) e tone só mexem em custom properties (--cm-slider-track-height, --cm-slider-thumb-size, --cm-slider-color).