Slider

Control deslizante para elegir un valor o un rango entre dos límites.

Navegadores: Chrome 123+Firefox 121+Safari 17.5+
Nivel: 0
Tamaño comprimido: 465 B
Presupuesto de diseño forzado: 0 ms
Presupuesto de axe: 0
Compatible con SSR: Sí
Contrato publicado: Entorno de pruebas

Zona de pruebas

Slider

Slider predeterminado

Volumen: 40%

Slider controlado

Calidad: 70%

Slider con marcas

Slider de rango

Slider vertical

Slider desactivado

React

CSS

Tailwind

"use client";

import { useState } from "react";
import { Slider } from "@gunkin/uiify";
import { SliderClient } from "@gunkin/uiify/components/slider/client";

export default function Example() {
  const [volume, setVolume] = useState(40);
  const [value, setValue] = useState(70);

  return (
    <div>
      <label>
        <span>Volume: {volume}%</span>
        <Slider aria-label="Volume" className="" onValueChange={setVolume} value={volume} />
      </label>
      <label>
        <span>Quality: {value}%</span>
        <SliderClient
          aria-label="Quality"
          className=""
          marks={[
            { value: 0, label: "Draft" },
            { value: 25, label: "Standard" },
            { value: 70, label: "High" },
            { value: 100, label: "Ultra" },
          ]}
          max={100}
          min={0}
          onValueChange={(next) => {
            if (typeof next === "number") setValue(next);
          }}
          step={null}
          value={value}
        />
      </label>
    </div>
  );
}

/* Native controls stay visible until hydration; the client entry then adds a
   labeled track while retaining the real range inputs for input semantics. */

@layer components {
  [data-uiify-slider],
  [data-uiify-slider-client] {
    --uiify-slider-track-size: 0.375rem;
    --uiify-slider-track-radius: 999px;
    --uiify-slider-thumb-size: 1.125rem;
  }

  [data-uiify-slider] {
    box-sizing: border-box;
    display: block;
    inline-size: 100%;
    max-inline-size: 22rem;
    min-inline-size: 14rem;
    min-block-size: 2.75rem;
    padding-inline: 0.5625rem;
    appearance: none;
    background-color: transparent;
    cursor: pointer;
  }

  [data-uiify-slider]::-webkit-slider-runnable-track {
    block-size: var(--uiify-slider-track-size);
    border-radius: var(--uiify-slider-track-radius);
    background: linear-gradient(
      to right,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]::-webkit-slider-thumb {
    box-sizing: border-box;
    inline-size: var(--uiify-slider-thumb-size);
    block-size: var(--uiify-slider-thumb-size);
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    margin-block-start: calc((var(--uiify-slider-track-size) - var(--uiify-slider-thumb-size)) / 2);
    appearance: none;
  }

  [data-uiify-slider]::-moz-range-thumb {
    box-sizing: border-box;
    inline-size: var(--uiify-slider-thumb-size);
    block-size: var(--uiify-slider-thumb-size);
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
  }

  [data-uiify-slider]::-moz-range-track {
    block-size: var(--uiify-slider-track-size);
    border: 0;
    border-radius: var(--uiify-slider-track-radius);
    background: linear-gradient(
      to right,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]::-moz-range-progress {
    background: transparent;
  }

  [data-uiify-slider]:dir(rtl)::-webkit-slider-runnable-track {
    background-image: linear-gradient(
      to left,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]:dir(rtl)::-moz-range-track {
    background-image: linear-gradient(
      to left,
      var(--primary) 0 var(--uiify-slider-progress, 50%),
      var(--muted) var(--uiify-slider-progress, 50%) 100%
    );
  }

  [data-uiify-slider]:focus-visible {
    outline: 3px solid var(--ring);
    outline-offset: 0.25rem;
  }

  [data-uiify-slider]:disabled,
  [data-uiify-slider][data-disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  [data-uiify-slider-client] {
    position: relative;
    display: grid;
    align-items: center;
    inline-size: 100%;
    max-inline-size: 22rem;
    min-inline-size: 14rem;
    min-block-size: 2.75rem;
    accent-color: var(--primary);
  }

  [data-uiify-slider-client] > input[data-part="thumb"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    margin: 0;
    accent-color: var(--primary);
    opacity: 0.001;
  }

  [data-uiify-slider-client] [data-part="track"] {
    position: absolute;
    display: block;
    inset-inline: 0.5625rem;
    inset-block-start: 50%;
    block-size: var(--uiify-slider-track-size);
    border-radius: var(--uiify-slider-track-radius);
    background: var(--muted);
    pointer-events: none;
    translate: 0 -50%;
  }

  [data-uiify-slider-client][data-enhanced][data-range] > input[data-part="thumb"]:first-of-type {
    clip-path: inset(0 calc(100% - var(--uiify-slider-middle)) 0 0);
  }

  [data-uiify-slider-client][data-enhanced][data-range] > input[data-part="thumb"]:last-of-type {
    clip-path: inset(0 0 0 var(--uiify-slider-middle));
  }

  [data-uiify-slider-client] [data-part="range"] {
    position: absolute;
    inset-block: 0;
    inset-inline-start: var(--uiify-slider-start);
    inline-size: calc(var(--uiify-slider-end) - var(--uiify-slider-start));
    border-radius: var(--uiify-slider-track-radius);
    background: var(--primary);
  }

  [data-uiify-slider-client] [data-part="mark"] {
    position: absolute;
    z-index: 1;
    inset-block-start: calc(50% + 0.75rem);
    inset-inline-start: var(--uiify-slider-position);
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    color: var(--muted-foreground);
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
    translate: -50% 0;
  }

  [data-uiify-slider-client] [data-part="mark"]::before {
    inline-size: 1px;
    block-size: 0.4rem;
    background: currentcolor;
    content: "";
  }

  [data-uiify-slider-client] [data-part="visual-thumb"] {
    position: absolute;
    z-index: 2;
    inset-block-start: 50%;
    inset-inline-start: var(--uiify-slider-position);
    inline-size: var(--uiify-slider-thumb-size);
    aspect-ratio: 1;
    border: 2px solid var(--background);
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 0 1px var(--primary);
    translate: -50% -50%;
  }

  [data-uiify-slider-client]:has(input:focus-visible) [data-part="track"] {
    outline: 3px solid var(--ring);
    outline-offset: 0.25rem;
  }

  [data-uiify-slider-client][data-disabled] {
    opacity: 0.55;
    cursor: not-allowed;
  }

  [data-uiify-slider-client][data-disabled] > input {
    cursor: not-allowed;
  }

  [data-uiify-slider-client][data-orientation="vertical"] {
    inline-size: 14rem;
    max-inline-size: none;
    block-size: 3rem;
    writing-mode: vertical-rl;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="track"] {
    inset-inline: 0.5625rem;
    inset-block: 50% auto;
    inline-size: auto;
    block-size: 0.375rem;
    translate: 50% 0;
  }

  [data-uiify-slider-client][data-enhanced][data-range][data-orientation="vertical"]
    > input[data-part="thumb"]:first-of-type {
    clip-path: inset(0 0 calc(100% - var(--uiify-slider-middle)) 0);
  }

  [data-uiify-slider-client][data-enhanced][data-range][data-orientation="vertical"]
    > input[data-part="thumb"]:last-of-type {
    clip-path: inset(var(--uiify-slider-middle) 0 0 0);
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="range"] {
    inset-block: 0;
    inset-inline: var(--uiify-slider-start) auto;
    inline-size: calc(var(--uiify-slider-end) - var(--uiify-slider-start));
    block-size: 100%;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="mark"] {
    inset-block-start: var(--uiify-slider-position);
    inset-inline: calc(50% + 0.75rem) auto;
    justify-items: start;
    writing-mode: horizontal-tb;
    translate: 0 -50%;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="mark"]::before {
    inline-size: 0.4rem;
    block-size: 1px;
  }

  [data-uiify-slider-client][data-orientation="vertical"] [data-part="visual-thumb"] {
    inset-block-start: 50%;
    inset-inline-start: var(--uiify-slider-position);
    translate: 50% -50%;
  }
}

"use client";

import { useState } from "react";
import { Slider } from "@gunkin/uiify";
import { SliderClient } from "@gunkin/uiify/components/slider/client";

export default function Example() {
  const [volume, setVolume] = useState(40);
  const [value, setValue] = useState(70);

  return (
    <div>
      <label>
        <span>Volume: {volume}%</span>
        <Slider
          aria-label="Volume"
          className={
            "[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.1" +
            "25rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:2.75rem]" +
            " [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-runnable-t" +
            "rack]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-radius:var" +
            "(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient(to_right," +
            "var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] " +
            "[&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slider-thumb-si" +
            "ze)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[b" +
            "order:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-" +
            "primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-thumb]:[marg" +
            "in-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [&::-webkit" +
            "-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline-size:var(" +
            "--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-moz-" +
            "range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thu" +
            "mb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-track]:[block" +
            "-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:border-none " +
            "[&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:[backgroun" +
            "d:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-s" +
            "lider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slider-runnable" +
            "-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var" +
            "(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-image:line" +
            "ar-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-p" +
            "rogress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offset:0.25rem" +
            "] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:cursor-not" +
            "-allowed"
          }
          onValueChange={setVolume}
          value={volume}
        />
      </label>
      <label>
        <span>Quality: {value}%</span>
        <SliderClient
          aria-label="Quality"
          className={
            "[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.1" +
            "25rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:2.75rem]" +
            " [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-runnable-t" +
            "rack]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-radius:var" +
            "(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient(to_right," +
            "var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] " +
            "[&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slider-thumb-si" +
            "ze)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[b" +
            "order:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-" +
            "primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-thumb]:[marg" +
            "in-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [&::-webkit" +
            "-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline-size:var(" +
            "--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-moz-" +
            "range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thu" +
            "mb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-track]:[block" +
            "-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:border-none " +
            "[&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:[backgroun" +
            "d:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-s" +
            "lider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slider-runnable" +
            "-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var" +
            "(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-image:line" +
            "ar-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-p" +
            "rogress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offset:0.25rem" +
            "] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:cursor-not" +
            "-allowed"
          }
          marks={[
            { value: 0, label: "Draft" },
            { value: 25, label: "Standard" },
            { value: 70, label: "High" },
            { value: 100, label: "Ultra" },
          ]}
          max={100}
          min={0}
          onValueChange={(next) => {
            if (typeof next === "number") setValue(next);
          }}
          step={null}
          value={value}
        />
      </label>
    </div>
  );
}

/* app.css */

@layer reset, ui, app, tokens, base, demo, components, utilities, theme;

@import "@gunkin/uiify/styles/reset";

@import "@gunkin/uiify/components/behavior.css";

@import "@gunkin/uiify/styles/tokens";

@import "@gunkin/uiify/styles/tailwind";

@import "tailwindcss/utilities.css";

@theme { --spacing: 0.25rem; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; }

@source inline('[--uiify-slider-track-size:0.375rem] [--uiify-slider-track-radius:999px] [--uiify-slider-thumb-size:1.125rem] box-border block w-full [max-inline-size:22rem] [min-inline-size:14rem] [min-block-size:2.75rem] [padding-inline:0.5625rem] appearance-none bg-transparent cursor-pointer [&::-webkit-slider-runnable-track]:[block-size:var(--uiify-slider-track-size)] [&::-webkit-slider-runnable-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-webkit-slider-runnable-track]:[background:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&::-webkit-slider-thumb]:box-border [&::-webkit-slider-thumb]:[inline-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-webkit-slider-thumb]:[border:2px_solid_var(--background)] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-webkit-slider-thumb]:[margin-block-start:calc((var(--uiify-slider-track-size)_-_var(--uiify-slider-thumb-size))_/_2)] [&::-webkit-slider-thumb]:appearance-none [&::-moz-range-thumb]:box-border [&::-moz-range-thumb]:[inline-size:var(--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[block-size:var(--uiify-slider-thumb-size)] [&::-moz-range-thumb]:[border:2px_solid_var(--background)] [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:[box-shadow:0_0_0_1px_var(--primary)] [&::-moz-range-track]:[block-size:var(--uiify-slider-track-size)] [&::-moz-range-track]:border-0 [&::-moz-range-track]:border-none [&::-moz-range-track]:[border-radius:var(--uiify-slider-track-radius)] [&::-moz-range-track]:[background:linear-gradient(to_right,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&::-moz-range-progress]:bg-transparent [&:dir(rtl)::-webkit-slider-runnable-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] [&:dir(rtl)::-moz-range-track]:[background-image:linear-gradient(to_left,var(--primary)_0_var(--uiify-slider-progress,50%),var(--muted)_var(--uiify-slider-progress,50%)_100%)] focus-visible:[outline:3px_solid_var(--ring)] focus-visible:[outline-offset:0.25rem] disabled:opacity-55 disabled:cursor-not-allowed data-[disabled]:opacity-55 data-[disabled]:cursor-not-allowed');

@layer base { :root { --uiify-control-text: var(--text-sm); } @media (pointer: coarse) { :root { --uiify-control-text: var(--text-base); } } }

/* Authored animation and registered properties used by the Tailwind skin.
 * Visual rules belong in utility recipes; only at-rule definitions live here. */
@layer components {
  @keyframes uiify-presence-in {
    from {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@layer components {
  @keyframes uiify-presence-out {
    to {
      opacity: 0;
      scale: var(--presence-scale);
    }
  }
}

@property --uiify-spinner-tail {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --uiify-spinner-length {
  syntax: "<angle>";
  inherits: false;
  initial-value: 36deg;
}

@layer components {
  @keyframes uiify-spinner-rotate {
    to {
      transform: rotate(360deg);
    }
  }
}

@layer components {
  @keyframes uiify-spinner-orbit {
    0% {
      --uiify-spinner-tail: 0deg;
      --uiify-spinner-length: 36deg;
    }

    50% {
      --uiify-spinner-tail: 90deg;
      --uiify-spinner-length: 324deg;
    }

    100% {
      --uiify-spinner-tail: 360deg;
      --uiify-spinner-length: 36deg;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-pulse {
    50% {
      opacity: 0.45;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-shimmer {
    to {
      background-position: -200% 0;
    }
  }
}

@layer components {
  @keyframes uiify-skeleton-reveal {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

@property --candle-body-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-body-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-slot {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 100%;
}

@property --candle-wick-height {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-wick-top {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --candle-x {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 0%;
}

@property --candle-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@property --line-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-prev-y {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --line-count {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

@property --line-scale {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

@layer components {
  @keyframes uiify-otp-input-caret-blink {
    50% {
      opacity: 0;
    }
  }
}

API

`Slider`

Prop	Tipo	Predeterminado	Descripción
`value`	`number`	—	Valor actual; hace que el control deslizante sea controlado.
`defaultValue`	`number`	—	Valor inicial del control deslizante no controlado; luego lo gestiona el input nativo de tipo range.
`onValueChange`	`(value: number) => void`	—	Se llama con el nuevo número cada vez que se mueve el control deslizante.
`min`	`number`	`0`	Valor mínimo que se puede seleccionar.
`max`	`number`	`100`	Valor máximo que se puede seleccionar.
`step`	`number`	`1`	Incremento entre valores seleccionables.
`disabled`	`boolean`	`false`	Desactiva el input nativo y establece el atributo data-disabled.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

`SliderClient`

Prop	Tipo	Predeterminado	Descripción
`value`	`number \| readonly [number, number]`	—	Valor controlado; una tupla renderiza un control inferior y otro superior.
`defaultValue`	`number \| readonly [number, number]`	—	Valor inicial del input nativo de tipo range o del rango de dos controles.
`onValueChange`	`(value: number \| readonly [number, number]) => void`	—	Se llama cuando cambia el valor seleccionado o el rango ordenado.
`min`	`number`	`0`	Valor mínimo que se puede seleccionar.
`max`	`number`	`100`	Valor máximo que se puede seleccionar.
`step`	`number \| null`	`1`	Un step numérico conserva los incrementos nativos antes de la hidratación; null restringe los valores a min, max y las marcas después de la hidratación.
`marks`	`readonly { value: number; label?: ReactNode }[]`	—	Etiquetas de marcas y puntos de ajuste cuando step es null.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Dirección de la distribución del control y sus marcas.
`thumbLabels`	`readonly [string, string]`	—	Nombres accesibles de los controles inferior y superior del rango.
`disabled`	`boolean`	`false`	Desactiva todos los inputs nativos de tipo range.
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Teclado

Tecla	Acción
`Arrow keys`	Ajustar el input nativo de tipo range con foco en un incremento o punto de ajuste
`Home` / `End`	Mover el control con foco al mínimo o al máximo
`Tab`	Moverse entre los controles inferior y superior del rango

Accesibilidad

Slider renderiza un input nativo de tipo range que funciona antes de la hidratación y con JavaScript desactivado. SliderClient también renderiza inputs nativos de tipo range en el servidor y los controla después de la hidratación para valores de rango, marcas etiquetadas y ajustes no uniformes. Un step numérico conserva los incrementos nativos antes de la hidratación; el ajuste a marcas con step={null} comienza después de la hidratación. Dale a un control deslizante único un aria-label o aria-labelledby; dale thumbLabels a ambos controles de rango.

Puntos de estilo

data-uiify-sliderdata-uiify-slider-clientdata-part="root"data-part="track"data-part="range"data-part="mark"data-part="thumb"data-orientationdata-disableddata-enhanced--uiify-slider-start--uiify-slider-end--uiify-slider-position

Framework

Estilo

Tema

Idioma

Slider

Zona de pruebas

Slider

Slider predeterminado

Slider controlado

Slider con marcas

Slider de rango

Slider vertical

Slider desactivado

API

`Slider`

`SliderClient`

Teclado

Accesibilidad

Puntos de estilo