Slider

Control deslizante para un valor dentro de un rango.

Cuándo usarlo

Props. min, max, value / defaultValue, onChange(n), aria-label. Pista bg-quaternary, relleno fg-brand-primary, mando slider-handle-bg con borde slider-handle-border y shadow-md.

Teclado. Flechas, Inicio y Fin.

Diferencia con la vista previa de la guía. Como el range nativo de la guía, el control es inline-block y se apoya en la línea base; con el interlineado de esta web queda 1px más abajo.

Ejemplos

Props

Prop	Tipo	Por defecto	Descripción
`min`	`number`	`0`
`max`	`number`	`100`
`value`	`number`	—
`defaultValue`	`number`	`50`
`onChange`	`((value: number) => void)`	—
`aria-label`	`string`	—	Qué se ajusta: "Presupuesto", "Volumen".
`className`	`string`	—

Código

import { Slider } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Slider aria-label="Presupuesto" defaultValue={40} />
		</>
	);
}

---
import { Slider } from "@jotis-me/react";
---

<Slider client:load aria-label="Presupuesto" defaultValue={40} />

onChange es una función y no cruza de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.