Slider

在两个边界之间选择单个值或范围的滑块。

浏览器: Chrome 123+Firefox 121+Safari 17.5+
层级: 0
压缩后大小: 465 B
强制布局预算: 0 ms
axe 预算: 0
支持 SSR: 是
公开契约: 测试环境

交互示例

Slider

默认滑块

音量：40%

受控滑块

质量：70%

带刻度的滑块

范围滑块

纵向滑块

禁用的滑块

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`

属性	类型	默认值	说明
`value`	`number`	—	当前值，使滑块受控。
`defaultValue`	`number`	—	非受控滑块的初始值，此后由原生范围输入框管理。
`onValueChange`	`(value: number) => void`	—	滑块移动时，使用新数值调用。
`min`	`number`	`0`	可选的最小值。
`max`	`number`	`100`	可选的最大值。
`step`	`number`	`1`	可选值之间的增量。
`disabled`	`boolean`	`false`	禁用原生输入框，并设置data-disabled属性。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	替换渲染元素，同时保留行为和无障碍连接关系。

`SliderClient`

属性	类型	默认值	说明
`value`	`number \| readonly [number, number]`	—	受控值；元组会渲染下限和上限两个手柄。
`defaultValue`	`number \| readonly [number, number]`	—	原生range输入框或双手柄范围的初始值。
`onValueChange`	`(value: number \| readonly [number, number]) => void`	—	所选值或有序范围变化时调用。
`min`	`number`	`0`	可选的最小值。
`max`	`number`	`100`	可选的最大值。
`step`	`number \| null`	`1`	数字step在水合前保留原生步进；null在水合后将值限制为min、max及marks。
`marks`	`readonly { value: number; label?: ReactNode }[]`	—	step为null时的刻度标签和吸附停靠点。
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	控件及其刻度的布局方向。
`thumbLabels`	`readonly [string, string]`	—	范围下限和上限手柄的无障碍名称。
`disabled`	`boolean`	`false`	禁用所有原生范围输入框。
`render`	`ReactElement \| ((props, state) => ReactElement)`	—	替换渲染元素，同时保留行为和无障碍连接关系。

键盘

按键	操作
`Arrow keys`	将已聚焦的原生范围输入框调整一个步长，或移至相邻停靠点
`Home` / `End`	将已聚焦的滑块手柄移到最小值或最大值
`Tab`	在范围的下限和上限手柄之间移动

无障碍

Slider渲染原生范围输入框，在水合前和禁用JavaScript时均可工作。SliderClient也在服务端渲染原生范围输入框，水合后再控制它们，以支持范围值、带标签的刻度和非均匀吸附。数字step在水合前保留原生步进；step={null}的刻度吸附在水合后启用。为单个滑块提供aria-label或aria-labelledby；为范围的两个手柄提供thumbLabels。

样式钩子

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

框架

样式

主题

语言

Slider

交互示例

Slider

默认滑块

受控滑块

带刻度的滑块

范围滑块

纵向滑块

禁用的滑块

API

`Slider`

`SliderClient`

键盘

无障碍

样式钩子