Components组件Base UIBase UI 组件
Slider
An input where the user selects a value from within a given range.
Partially translated: Chinese navigation, titles, descriptions, and common headings. The technical body is currently in English.
Loading JGuang UI example…
Installation
Command
Manual
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
Install the following dependencies:
npm install @base-ui/react
Copy and paste the following code into your project.
View complete source: components/ui/slider.tsx
Update the import paths to match your project setup.
Usage
import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[33]} max={100} step={1} />
Range
Use an array with two values for a range slider.
Loading JGuang UI example…
Multiple Thumbs
Use an array with multiple values for multiple thumbs.
Loading JGuang UI example…
Vertical
Use orientation="vertical" for a vertical slider.
Loading JGuang UI example…
Controlled
Loading JGuang UI example…
Disabled
Use the disabled prop to disable the slider.
Loading JGuang UI example…
RTL
To enable RTL support in JGuang UI, see the RTL configuration guide.
Loading JGuang UI example…
API Reference
See the Base UI Slider documentation.
Source: components/base/slider.mdx
Technical documentation for JGuang UI.