Skip to content

Slider

The Slider component lets users select a number (or range) by dragging a thumb along a track. It is ideal for volume controls, price filters, or any scenario requiring a bounded numeric input.

Properties

Además de las propiedades comunes, el componente slider acepta las siguientes propiedades específicas:

Property	Type	Required	Default	Description
`type`	`"slider"`	Yes	—	Identifies the field as a slider
`schema`	`z.ZodType`	Yes	—	Esquema Zod para validación. Requerido. Debe validar `number` o `number[]`
`defaultValue`	`number[]`	No	`[0]`	Initial value. Array con 1 elemento para valor único, 2 elementos para rango
`min`	`number`	No	`0`	Minimum value
`max`	`number`	No	`100`	Maximum value
`step`	`number`	No	`1`	Step interval (incremento entre valores)

Valor del Campo

El valor de un slider puede ser:

Valor único: number cuando defaultValue tiene 1 elemento
Rango: number[] cuando defaultValue tiene 2 elementos (desde-hasta)

Ejemplo de Validación

// Para valor único
{
  type: "slider",
  defaultValue: [50],
  min: 0,
  max: 100,
  schema: z.number().min(0).max(100)
}

// Para rango
{
  type: "slider",
  defaultValue: [20, 80],
  min: 0,
  max: 100,
  schema: z.array(z.number()).length(2).refine(([min, max]) => max >= min, {
    message: "El máximo debe ser mayor o igual al mínimo"
  })
}

Example

Basic Slider

A basic slider with min 0, max 100

import { z } from "zod";
import { createExampleForm } from "../createExampleForm";

export const BasicSlider = createExampleForm({
  formId: "basic-slider",
  fields: {
    volume: {
      type: "slider",
      label: "Volume",
      defaultValue: [50],
      min: 0,
      max: 100,
      step: 1,
      schema: z.array(z.number()).nonempty(),
    },
  },
  steps: {
    step1: {
      id: "step1",
      fields: ["volume"],
    },
  },
});

Best Practices

Show the current value near the slider (@enlolab/forms does this by default).
Use logical min/max bounds—avoid huge ranges.
Combine with helper text to explain the metric.
Validate with Zod to enforce numeric constraints.

Accessibility

Supports keyboard via arrow keys and Home/End.
Screen readers announce the value.
Track and thumb colors follow your Tailwind theme.