文档目录

滑块

原版 20px slider 轨道 + 8×20 slider_handle 把手。

音乐音量：70%

import { useState } from "react";

import { Slider } from "./index";

/**
 * Slider 预览用例：受控音量滑条
*/
export function SliderDemo() {
  const [volume, setVolume] = useState(70);

  return (
    <div className="flex w-160 flex-col gap-8">
      <label className="flex flex-col gap-4">
        <span className="font-mc mc-text">
          音乐音量：
          {volume}
          %
        </span>
        <Slider
          aria-label="音乐音量"
          onValueChange={(value) => {
            setVolume(Array.isArray(value) ? (value[0] ?? 30) : value);
          }}
          value={volume}
        />
      </label>
      <Slider aria-label="默认值滑条" defaultValue={30} />
    </div>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/slider

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

import { Slider } from "@tennantite/ui";

CLI 拷贝导入

import { Slider } from "@/components/tennantite/slider";

import { useState } from "react";

import { Slider } from "./index";

/**
 * Slider 预览用例：受控音量滑条
*/
export function SliderDemo() {
  const [volume, setVolume] = useState(70);

  return (
    <div className="flex w-160 flex-col gap-8">
      <label className="flex flex-col gap-4">
        <span className="font-mc mc-text">
          音乐音量：
          {volume}
          %
        </span>
        <Slider
          aria-label="音乐音量"
          onValueChange={(value) => {
            setVolume(Array.isArray(value) ? (value[0] ?? 30) : value);
          }}
          value={volume}
        />
      </label>
      <Slider aria-label="默认值滑条" defaultValue={30} />
    </div>
  );
}

API Reference

无公开 props。

源码

packages/ui/src/primitives/slider/index.tsx

npm 包保留源码目录，可直接复制改造。