125k

Slider

PreviousNext

指定した範囲からユーザーが値を選択する入力。

BaseRadixReact Aria
import { Slider } from "@/components/ui/radix/slider"

export function SliderDemo() {

インストール

pnpm dlx shadcn@latest add slider

使い方

import { Slider } from "@/components/ui/slider"
<Slider defaultValue={[33]} max={100} step={1} />

範囲

範囲スライダーには 2 つの値を持つ配列を使用します。

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

export function SliderRange() {

複数のサム

複数のサムに複数の値を含む配列を使用します。

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

export function SliderMultiple() {

垂直

垂直スライダーには orientation="vertical" を使用します。

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

export function SliderVertical() {

制御

0.3, 0.7
"use client"

import * as React from "react"

無効

disabled プロップを使用してスライダーを無効にします。

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

export function SliderDisabled() {

RTL

shadcn/ui で RTL サポートを有効にするには、RTL 構成ガイドを参照してください。

"use client"

import * as React from "react"

API リファレンス

Radix UI Slider のドキュメントを参照してください。