72Başlayın
HextaUI

Slider

Sürükleyerek, ize dokunarak veya tuşlarla bir değer ya da aralık seçin; süzülen atlamalar ve isteğe bağlı bir değer balonuyla.

Volume
60
import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderDemo() {
  return (
    <Slider defaultValue={60} className="max-w-xs">
      <SliderLabel>Volume</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/slider.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Kullanım

import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"
<Slider defaultValue={[50]} max={100} step={1} aria-label="Volume" />

<Slider defaultValue={50}>
  <SliderLabel>Volume</SliderLabel>
  <SliderValue />
</Slider>

<Slider /> değer başına bir başparmak çizer; bu yüzden bir sayı veya tek öğeli bir dizi tek bir slider, iki öğe ise bir aralık oluşturur. <SliderLabel /> ve <SliderValue /> gibi alt öğeler izin üstünde tek satırda durur.

Sürüklerken başparmak işaretçiyi tam olarak izler. Değer ize basma, bir tuş veya yeni kontrollü bir değerle atladığında başparmak ve dolgu ışınlanmak yerine 180ms'de oraya süzülür.

Kompozisyon

Slider
├── SliderLabel
└── SliderValue

Örnekler

Boyutlar

sm, default ve lg başparmağı ve izi birlikte ölçekler.

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

export function SliderSizes() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-8">
      <Slider size="sm" defaultValue={25} aria-label="Small" />
      <Slider defaultValue={50} aria-label="Default" />
      <Slider size="lg" defaultValue={75} aria-label="Large" />
    </div>
  )
}

Aralık

Bir aralık için iki değer verin. Her başparmağı getAriaLabel ile adlandırın ve minStepsBetweenValues ile birbirinden uzak tutun. draggableRange ile ikisini birden hareket ettirmek için başparmaklar arasında herhangi bir yeri sürükleyin; oraya dokunmak yine en yakın başparmağı hareket ettirir.

"use client"

import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderRange() {
  return (
    <Slider
      defaultValue={[200, 800]}
      max={1000}
      step={10}
      minStepsBetweenValues={10}
      draggableRange
      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
      getAriaLabel={(index) =>
        index === 0 ? "Minimum price" : "Maximum price"
      }
      className="max-w-xs"
    >
      <SliderLabel>Price</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Değer balonu

showValue sürüklenirken veya klavyeyle odaklanırken biçimlendirilmiş değeri başparmağın üstünde gösterir. Balon izin üstündeki boşluğa yükseldiği için bunu bir etiket satırı yerine kullanın.

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

export function SliderValueBubble() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-10 pt-8">
      <Slider
        defaultValue={0.4}
        max={1}
        step={0.01}
        format={{ style: "percent" }}
        showValue
        aria-label="Opacity"
      />
      <Slider defaultValue={[30, 70]} showValue aria-label="Range" />
    </div>
  )
}

Adımlar ve biçim

step değeri yakalar, largeStep Page Up ve Shift + ok atlamasını belirler, format ise slider'ın gösterdiği veya duyurduğu her sayıyı biçimlendirir.

import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderSteps() {
  return (
    <Slider
      defaultValue={1}
      min={0.5}
      max={2}
      step={0.25}
      largeStep={0.5}
      format={{ minimumFractionDigits: 2 }}
      className="max-w-xs"
    >
      <SliderLabel>Playback speed</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Kontrollü

onValueChange her harekette, onValueCommitted ise bırakıldığında bir kez tetiklenir; kaydetmek için doğru an budur. Değeri dışarıdan ayarlamak da süzülür.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderControlled() {
  const [value, setValue] = React.useState(40)
  const [saved, setSaved] = React.useState(40)

  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <Slider
        value={value}
        onValueChange={setValue}
        onValueCommitted={setSaved}
      >
        <SliderLabel>Brightness</SliderLabel>
        <SliderValue />
      </Slider>
      <div className="flex items-center justify-between gap-3">
        <span className="text-sm text-muted-foreground">Saved: {saved}</span>
        <div className="flex gap-2">
          <Button variant="outline" size="sm" onClick={() => setValue(0)}>
            Off
          </Button>
          <Button variant="outline" size="sm" onClick={() => setValue(100)}>
            Max
          </Button>
        </div>
      </div>
    </div>
  )
}

Dikey

orientation="vertical" ile slider üst öğesinin yüksekliğini doldurur ve Yukarı değeri artırır.

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

const bands = [
  { label: "60 Hz", value: 70 },
  { label: "250 Hz", value: 45 },
  { label: "1 kHz", value: 55 },
  { label: "4 kHz", value: 80 },
  { label: "16 kHz", value: 35 },
]

export function SliderVertical() {
  return (
    <div className="flex h-48 gap-6">
      {bands.map((band) => (
        <div key={band.label} className="flex flex-col items-center gap-3">
          <Slider
            orientation="vertical"
            defaultValue={band.value}
            aria-label={band.label}
          />
          <span className="text-xs text-muted-foreground tabular-nums">
            {band.label}
          </span>
        </div>
      ))}
    </div>
  )
}

Simgelerle

Simgeleri slider'ın yanına bir flex satırında yerleştirin. Slider kalan genişliği alır.

import { IconVolume, IconVolume3 } from "@tabler/icons-react"

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

export function SliderIcons() {
  return (
    <div className="flex w-full max-w-xs items-center gap-3 text-muted-foreground">
      <IconVolume3 className="size-4 shrink-0" aria-hidden />
      <Slider defaultValue={50} aria-label="Volume" />
      <IconVolume className="size-4 shrink-0" aria-hidden />
    </div>
  )
}

Devre dışı

Tüm slider solar ve işaretçi ile klavye girdisini yok sayar.

import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderDisabled() {
  return (
    <Slider defaultValue={30} disabled className="max-w-xs">
      <SliderLabel>Bass boost</SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Uzun etiketler

Uzun etiketler sarar ve değer sonda kalır.

import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderLongLabel() {
  return (
    <Slider
      defaultValue={[1200, 48000]}
      min={0}
      max={50000}
      step={100}
      format={{ style: "currency", currency: "USD", maximumFractionDigits: 0 }}
      className="max-w-xs"
    >
      <SliderLabel>
        Annual household income before taxes, including side projects
      </SliderLabel>
      <SliderValue />
    </Slider>
  )
}

Sağdan sola

Sağdan sola bir üst öğenin içinde dolgu sağdan başlar ve ok tuşları onu izler. Okuyucunun rakamları için locale verin.

import { Slider, SliderLabel, SliderValue } from "@/components/ui/slider"

export function SliderRtl() {
  return (
    <div dir="rtl" className="flex w-full max-w-xs flex-col gap-8">
      <Slider defaultValue={65} locale="ar-EG">
        <SliderLabel>مستوى الصوت</SliderLabel>
        <SliderValue />
      </Slider>
      <Slider defaultValue={[20, 70]} locale="ar-EG" draggableRange>
        <SliderLabel>النطاق</SliderLabel>
        <SliderValue />
      </Slider>
    </div>
  )
}

Klavye

TuşAction
TabOdağı sonraki başparmağa taşır.
→↑Değeri bir adım artırır. Sağdan solda → azaltır.
←↓Değeri bir adım azaltır. Sağdan solda ← artırır.
Shift + ArrowPage UpPage DownlargeStep kadar hareket eder.
HomeMinimumu ya da bir aralıkta önceki başparmağın değerini ayarlar.
EndMaksimumu ya da bir aralıkta sonraki başparmağın değerini ayarlar.

Erişilebilirlik

  • Her başparmak yerel bir input type="range" tutar; yani kendi değeri, min ve max değerleri olan bir slider'dır.
  • <SliderLabel /> her başparmağı adlandırır. Olmadan <Slider /> üzerindeki aria-label sarmalayıcıya değil başparmaklara iletilir; böylece slider hiçbir zaman adsız kalmaz. Bir aralıkta başparmakları ayırt etmek için getAriaLabel kullanın.
  • <SliderValue /> ve değer balonu her değişiklikte duyurulmaz; başparmak değerini zaten bildirir.
  • Bir başparmağa basmak odak halkası göstermez; ok tuşları gösterir. Azaltılmış harekette başparmak süzülmek yerine atlar.
  • Dokunmatik ekranlarda tıklama alanı düzeni değiştirmeden en az 44px'e büyür.

API referansı

Base UI slider üzerine kuruludur. Her parça sardığı ilkelin prop'larını kabul eder.

Slider

PropTürVarsayılan
valueKontrollü değer. Öğe başına bir başparmak.
number | number[]–
defaultValue
number | number[]–
onValueChangeSürüklerken her değişiklikte tetiklenir.
(value, eventDetails) => void–
onValueCommittedBir değişiklik bittiğinde bir kez tetiklenir.
(value, eventDetails) => void–
min
number0
max
number100
step
number1
largeStep
number10
minStepsBetweenValues
number0
size
"sm" | "default" | "lg""default"
orientation
"horizontal" | "vertical""horizontal"
draggableRangeBir aralıkta başparmaklar arasında sürüklemek aradaki boşluğu koruyarak ikisini birlikte hareket ettirir.
booleanfalse
showValueSürüklerken veya klavye odağındayken değeri başparmağın üstünde gösterir.
booleanfalse
thumbAlignmentedge, başparmağı min ve max değerlerinde izin içinde tutar.
"edge" | "center" | "edge-client-only""edge"
thumbCollisionBehavior
"push" | "swap" | "none""push"
format
Intl.NumberFormatOptions–
locale
Intl.LocalesArgument"en-US"
aria-labelBaşparmakları adlandırır.
string–
getAriaLabelBir aralığın her başparmağını adlandırır.
(index: number) => string–
getAriaValueText
(formattedValue: string, value: number, index: number) => string–
name
string–
disabled
booleanfalse
className
string | (state) => string–
render
ReactElement | (props, state) => ReactElement<div>
ÖznitelikAçıklama
data-slot="slider"Kök.
data-sizesm, default veya lg.
data-jumpBaşparmak yeni bir değere süzülürken 220ms boyunca bulunur.
data-range-draggingTüm aralık sürüklenirken bulunur.
data-orientationhorizontal veya vertical.
data-draggingİşaretçi basılıyken bulunur.
data-disabledDevre dışıyken bulunur.
data-invalidBir Field içinde geçersizken bulunur.
--slider-thumbBaşparmağın çapı; size ile belirlenir.
--slider-trackİzin kalınlığı; size ile belirlenir.
data-slot="slider-control"İzin çevresindeki basılabilir alan.
data-slot="slider-track"İz.
data-slot="slider-range"Başlangıç veya ilk başparmak ile son başparmak arasındaki dolgu.
data-slot="slider-thumb"Her başparmak. data-index konumunu verir.
data-activeOdaktaki veya sürüklenen başparmakta.
data-slot="slider-thumb-value"showValue'dan gelen değer balonu.

SliderLabel

Başparmakları adlandırır ve satırı dolduracak şekilde büyür. Bir <div> işler.

PropTürVarsayılan
render
ReactElement | (props, state) => ReactElement<div>
ÖznitelikAçıklama
data-slot="slider-label"Etiket.

SliderValue

Biçimlendirilmiş değerleri gösterir; aralıkta bir en tire ile birleştirilir. Bir <output> işler.

PropTürVarsayılan
childrenÖzel metin.
(formattedValues: string[], values: number[]) => ReactNode–
render
ReactElement | (props, state) => ReactElement<output>
ÖznitelikAçıklama
data-slot="slider-value"Değer.
data-orientationhorizontal veya vertical.
data-draggingİşaretçi basılıyken bulunur.
data-disabledDevre dışıyken bulunur.
data-invalidBir Field içinde geçersizken bulunur.

İlgili

Kullanıldığı bloklar

Slider üzerine kurulan bloklar.