Deslizador

Esto es un <input type="range"> de verdad: las flechas, Inicio y Fin, y el anuncio correcto vienen todos del navegador. Solo se estilizan el carril y el pulgar.

Deslizador básico

Calidad

sliderField({ label: 'Calidad', name: 'quality', value: 70 })

Rango y paso

Volumen

Columnas

Escala

stack({ gap: 'lg' },
  sliderField({ label: 'Volumen', name: 'volume', min: 0, max: 100, value: 40 }),
  sliderField({ label: 'Columnas', name: 'columns', min: 1, max: 6, step: 1, value: 3 }),
  sliderField({ label: 'Escala', name: 'scale', min: 0.5, max: 2, step: 0.25, value: 1 }),
)

Mostrar el valor

showValue pone un <output> junto al carril con el valor con el que se compiló la página, y el input va a buscar su propio handler en el primer arrastre, así que el número sigue al pulgar. No hay nada que importar: un número que se quedara obsoleto en silencio sería peor que no tener número, así que este no se te deja a ti.

Calidad de imagen

Más alto pesa más y hace la compilación más lenta.

sliderField({
  label: 'Calidad de imagen',
  name: 'jpeg-quality',
  min: 40,
  max: 100,
  value: 82,
  showValue: true,
  help: 'Más alto pesa más y hace la compilación más lenta.',
})

Ponerlo desde tu propio código

Un deslizador es un control de formulario, así que es del lector — pero un preajuste, un botón de reinicio o un valor que llega por la red tienen que poder moverlo. Dale un id y setSlider lo hace, llevándose con él el <output>.

import { setSlider } from 'sitelo/ui/client'

setSlider('volume', 50)

O alcanza el módulo como lo alcanzan los componentes, y sáltate el bundle por completo:

button({ onclick: "import('/su/slider.js').then(m=>m.set('volume',50))" }, 'Mitad')

El navegador recorta a min y max y ajusta al step, así que lo que vuelve es dónde acabó el deslizador, no lo que se le pasó. Después van input y change, porque una vista previa que escucha el arrastre no tiene otra forma de enterarse de un movimiento que no provocó. getSlider() vuelve a leer el valor.

Pruébalo

Esta página carga el runtime, así que los botones de abajo mueven el deslizador de verdad.

stack({ gap: 'md' },
  slider({ id: 'demo-slider', value: 40, showValue: true, 'aria-label': 'Demo' }),
  stack({ direction: 'row', gap: 'sm', wrap: true },
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',0))" }, 'Mín'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',50))" }, 'Mitad'),
    button({ size: 'sm', variant: 'outline', onclick: "import('/su/slider.js').then(m=>m.set('demo-slider',100))" }, 'Máx'),
  ),
)

Colores

stack({ gap: 'lg' },
  slider({ value: 70, color: 'primary', 'aria-label': 'Primary' }),
  slider({ value: 55, color: 'success', 'aria-label': 'Success' }),
  slider({ value: 35, color: 'warning', 'aria-label': 'Warning' }),
  slider({ value: 20, color: 'danger', 'aria-label': 'Danger' }),
)

Deshabilitado

Bloqueado

sliderField({ label: 'Bloqueado', name: 'locked', value: 50, disabled: true })

Sin etiqueta

Un slider() pelado es el control a secas: dale un aria-label cuando no haya una etiqueta visible que lo señale.

stack({ direction: 'row', gap: 'md', align: 'center' },
  text({ variant: 'small', tone: 'muted' }, 'Aa'),
  slider({ min: 12, max: 24, value: 16, 'aria-label': 'Tamaño del texto' }),
  text({ tone: 'muted' }, 'Aa'),
)

En un formulario

Ancho máximo de imagen

1280

Calidad

card(
  cardBody(
    stack({ gap: 'lg' },
      sliderField({ label: 'Ancho máximo de imagen', name: 'max-width', min: 640, max: 2560, step: 160, value: 1280, showValue: true }),
      sliderField({ label: 'Calidad', name: 'q', min: 40, max: 100, value: 82, showValue: true }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Guardar'),
  ),
)

Props

Prop	Tipo	Por defecto	Descripción
`min`	`number \| string`	`0`	Límite inferior.
`max`	`number \| string`	`100`	Límite superior.
`step`	`number \| string`	—	Incremento. Omítelo para el valor por defecto del navegador, 1.
`value`	`number \| string`	—	Valor inicial.
`showValue`	`boolean`	`false`	Añade un <output> con el valor de la compilación.
`color`	`'primary' \| 'neutral' \| 'success' \| 'warning' \| 'danger'`	`'primary'`	Color del pulgar.
`name`	`string`	—	Nombre del campo; el id se deriva de él.
`disabled`	`boolean`	`false`	Deshabilita el control.

sliderField() admite además label, help, error y required — mira textField().