滑块

一个可拖动输入控件，用于选择数值或范围——例如音量、价格筛选条件、设置等——并采用了新粗野主义风格的边框和阴影处理效果。

import { Slider } from "@/components/ui/slider"

export function SliderDemo() {

滑块让用户沿着轨道拖动来选取一个数值——或者用两个滑块柄选取一个区间。它基于 Base UI Slider 组件构建，并按新粗野主义的配方设计：粗边框、带硬阴影的方形滑块柄，以及一段实心的已填充区间。

适合以下场景：

音量、亮度、播放进度——在播放器和设备式控件里，拖动远比输入数字顺手。
价格与区间筛选——两个滑块柄就构成搜索和电商列表里的最小值–最大值筛选器。
有合理上下限的数值设置——不透明度、圆角、字号，凡是有界的数值，展示出来都比让人输入更好。

安装


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/slider.json
npx shadcn@latest add https://neobrutalism.com/r/base/slider.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/slider.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/slider.json

安装以下依赖：


pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

将以下代码复制并粘贴到您的项目中。

components/ui/slider.tsx

"use client"

import * as React from "react"
import { Slider as SliderPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function Slider({
  className,
  defaultValue,
  value,
  min = 0,
  max = 100,
  // Pulled out of the root spread so they land on the Thumb (the element
  // with role="slider" that screen readers announce), not just the Root.
  "aria-label": ariaLabel,
  "aria-labelledby": ariaLabelledby,
  ...props
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
  const _values = React.useMemo(
    () =>
      Array.isArray(value)
        ? value
        : Array.isArray(defaultValue)
          ? defaultValue
          : [min, max],
    [value, defaultValue, min, max]
  )

  return (
    <SliderPrimitive.Root
      data-slot="slider"
      defaultValue={defaultValue}
      value={value}
      min={min}
      max={max}
      className={cn(
        "relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col",
        className
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="slider-track"
        className="relative grow overflow-hidden border-2 bg-background data-horizontal:h-3 data-horizontal:w-full data-vertical:h-full data-vertical:w-3"
      >
        <SliderPrimitive.Range
          data-slot="slider-range"
          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"
        />
      </SliderPrimitive.Track>
      {Array.from({ length: _values.length }, (_, index) => (
        <SliderPrimitive.Thumb
          data-slot="slider-thumb"
          key={index}
          aria-label={ariaLabel}
          aria-labelledby={ariaLabelledby}
          className="relative block size-4.5 shrink-0 border-2 bg-background shadow-sm transition-[color,box-shadow] select-none after:absolute after:-inset-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:opacity-50"
        />
      ))}
    </SliderPrimitive.Root>
  )
}

export { Slider }

更新导入路径以匹配您的项目设置。

用法

import { Slider } from "@/components/ui/slider"

<Slider defaultValue={[33]} max={100} step={1} />

示例

范围

范围滑块请使用包含两个值的数组。

import { Slider } from "@/components/ui/slider"

export function SliderRange() {

多个滑块柄

多个滑块柄请使用包含多个值的数组。

import { Slider } from "@/components/ui/slider"

export function SliderMultiple() {

垂直

垂直方向的滑块请指定 orientation="vertical"。

import { Slider } from "@/components/ui/slider"

export function SliderVertical() {

受控

Temperature0.3, 0.7

"use client"

import * as React from "react"

禁用

使用 disabled 属性来禁用滑块。

import { Slider } from "@/components/ui/slider"

export function SliderDisabled() {

RTL

要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

滑块遵循 WAI-ARIA Slider 模式：每个滑块柄都是可聚焦的 role="slider" 元素，aria-valuemin、aria-valuemax 和 aria-valuenow 始终保持同步，背后还有一个隐藏的 input 负责表单提交。滑块本身没有可见的标签，所以请传入 aria-label 或 aria-labelledby——本封装会把两者都转发给滑块柄，也就是屏幕阅读器真正播报的那个元素。

键盘交互：

按键	操作
`Tab` / `Shift + Tab`	在各滑块柄之间移动焦点或移出
`ArrowRight` / `ArrowUp`	按一个步长增大数值
`ArrowLeft` / `ArrowDown`	按一个步长减小数值
`PageUp` / `PageDown`	按 `largeStep` 增大或减小数值（默认 10）
`Shift + Arrow`	按 `largeStep` 增大或减小数值
`Home` / `End`	跳到最小值或最大值

在 RTL 下，横向方向键会跟随阅读方向。

API 参考

请参阅 Base UI Slider 文档。