For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.1.0/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.1.0/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.1.0/components/slider.md.
  • 简体中文
  • v0.1.0
  • 滑块

    Live previewHTML · CSS · JavaScript

    用途

    Include CSS

    导入 Tailwind 和一个完整的 A3S UI 样式包。

    @import "tailwindcss";
    @import "@a3s-lab/ui/a3s.css";

    或者仅导入基本 CSS、重新组件 CSS 和一个样式包。

    @import "tailwindcss";
    @import "@a3s-lab/ui/base.css";
    @import "@a3s-lab/ui/components/range.css";
    @import "@a3s-lab/ui/styles/a3s.css";

    滑块使用 Range 组件 CSS。

    使用CDN或批量程序导入?请参见安装页

    Include JavaScript

    复制或提供完整的 A3S UI JavaScript 包。

    <script src="/assets/js/all.min.js" defer></script>

    或者复制或提供 A3S UI 运行时和脚本。

    <script src="/assets/js/runtime.min.js" defer></script>
    <script src="/assets/js/range.min.js" defer></script>

    使用CDN或批量程序导入?请参见安装页

    Add your slider HTML

    Use a native <input type="range" class="input">. Include range.js so A3S UI can keep the filled track in sync with the input value.

    <input type="range" class="input w-full" aria-label="音量" min="0" max="100" value="50" />

    HTML 结构

    <input type="range" class="input">
    Native range input styled as a slider. Width utilities such as w-full can be added directly.

    A3S UI 有意使用间歇范围输入。与 shadcn/ui 的 Base UI 调整不同,它不支持多个拇指或垂直方向。

    示例

    默认

    Live previewHTML · CSS · JavaScript

    标签

    Live previewHTML · CSS · JavaScript
    50

    已禁用

    Live previewHTML · CSS · JavaScript

    RTL

    Live previewHTML · CSS · JavaScript