Moodinary/UI

Slider

Valores aproximados en un rango (umbral, sensibilidad). Si importa el número exacto, Input.

Primitiva disponible sin uso actual en la app. Rango horizontal sobre Base UI, con el track y el thumb del paquete real. No representa un ajuste de alertas del producto. Para valores exactos, preferí Input.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/slider.json
import
import { Slider } from "@moodinary/ui/components/slider";

Ejemplos

Valor ilustrativo y estado deshabilitado

El número y la ayuda se actualizan al mover el control. El segundo rango muestra el estado deshabilitado.

Demostración de la primitiva; no es un ajuste del producto.

Código
default.tsx
"use client";

import { Field, FieldHint, FieldLabel } from "@moodinary/ui/components/field";
import { Slider } from "@moodinary/ui/components/slider";
import { useCallback, useState } from "react";

export default function SliderDefault() {
	const [value, setValue] = useState(50);
	const change = useCallback(
		(next: number | readonly number[]) =>
			setValue(Array.isArray(next) ? (next[0] ?? 0) : (next as number)),
		[]
	);
	return (
		<div className="flex w-full max-w-[420px] flex-col gap-5">
			<Field>
				<FieldLabel className="flex" id="slider-label">
					Valor de ejemplo{" "}
					<span className="ml-auto tabular-nums">{value}%</span>
				</FieldLabel>
				<Slider
					aria-labelledby="slider-label"
					max={100}
					min={0}
					onValueChange={change}
					step={1}
					value={value}
				/>
				<FieldHint>
					Demostración de la primitiva; no es un ajuste del producto.
				</FieldHint>
			</Field>
			<Field>
				<FieldLabel id="disabled-label">Deshabilitado</FieldLabel>
				<Slider aria-labelledby="disabled-label" defaultValue={30} disabled />
			</Field>
		</div>
	);
}

Props

Slider

PropTipoDefaultDescripción
value / defaultValuenumber | readonly number[]-Valor controlado o inicial. Usá un número para el thumb único del wrapper.
minnumber0Límite inferior.
maxnumber100Límite superior, distinto de min.
stepnumber1Incremento, admite decimales.
largeStepnumber10Incremento para PageUp, PageDown o Shift con flechas.
onValueChange(value: number | readonly number[], details: Slider.Root.ChangeEventDetails) => void-Se dispara mientras cambia el valor.
onValueCommitted(value: number | readonly number[], details: Slider.Root.CommitEventDetails) => void-Se dispara cuando se confirma el cambio.
disabledbooleanfalseBloquea el control y baja la opacidad.
namestring-Clave del campo en un formulario.

Cuándo sí y cuándo no

Hacé
  • Mostrá el valor actual junto al label.
  • Elegí min, max y step que se entiendan.
  • Usá onValueCommitted para una acción que no debe dispararse en cada movimiento.
Evitá
  • No uses un rango si importa escribir el número exacto.
  • No agregues una precisión que no tenga sentido.
  • No prometas varios thumbs: el wrapper renderiza uno.

Accesibilidad

  • Las flechas cambian un step; Home y End van a los extremos.
  • PageUp y PageDown usan largeStep.
  • Dale un nombre accesible con aria-labelledby que apunte a la pregunta visible.