nili/ui
enfaartr
Tüm bileşenler

Slider

Genel görünüm
9 export3 varyant ekseni23 prop4 dosya
import { Slider, SliderValue } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Tek tutamak ve aralık

Değerin biçimi türün kendisidir: bir sayı tek tutamak, bir [number, number] bir aralık çizer. Aralık kaydırıcısına yanlışlıkla tek sayı verilemez.

Ses40
Fiyat aralığı20 – 70
import { Slider } from "@nili/ui"

export function Example() {
  const [value, setValue] = useState(40)
  const [range, setRange] = useState([20, 70])

  return (
    <>
      <Slider
        label="Volume"
        value={value}
        onValueChange={setValue}
        showValue
      />

      <Slider
        label="Price"
        value={range}
        onValueChange={setRange}
        showValue
      />
    </>
  )
}

Etiket, alt etiket ve değer

label ray üzerinde görünmenin yanı sıra tutamakları da adlandırır. showValue geçerli sayıyı yanına koyar; sublabel soluk bir ikinci satır ekler.

Brightness
ParlaklıkYalnızca ekran60
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider label={t('brightness')} defaultValue={60} />
      <Slider label="Brightness" sublabel="Screen only" defaultValue={60} showValue />

      {/* no visible label — name the thumbs instead */}
      <Slider defaultValue={60} thumbLabels={["Brightness"]} />
    </>
  )
}

İpucu balonu

tooltip sürüklerken değeri tutamağın üstünde bir baloncukta gösterir — kalıcı bir gösterge için yer yokken işe yarar.

Opacity
import { Slider } from "@nili/ui"

export function Example() {
  return <Slider label={t('opacity')} defaultValue={75} tooltip />
}

Adımlar ve sınırlar

min, max ve step beklediğiniz gibi davranır. minStepsBetweenThumbs aralığın iki ucunun kesişmesini engeller.

Puan3
Sıcaklık20
Bütçe200 – 600
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider label="Rating" min={1} max={5} step={1} defaultValue={3} showValue />
      <Slider label="Temperature" min={-20} max={50} step={5} defaultValue={20} showValue />
      <Slider
        label="Budget"
        min={0}
        max={1000}
        step={50}
        defaultValue={[200, 600]}
        minStepsBetweenThumbs={2}
        showValue
      />
    </>
  )
}

Biçimlendirme

formatValue kullanıcının gördüğü ya da duyduğu her sayıyı değiştirir, yalnızca görüneni değil. Rakamlar varsayılan olarak ortam yerel ayarını izler; böylece Farsça bir arayüz Farsça rakamları bedavaya alır.

Depolama120 GB
İndirim25%
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider
        label="Storage"
        max={500}
        defaultValue={120}
        showValue
        formatValue={(value) => `${value} GB`}
      />

      <Slider
        label="Discount"
        defaultValue={25}
        showValue
        formatValue={(value) => `${value}%`}
      />
    </>
  )
}

Kesinleştirme ve devre dışı

onValueChange sürüklerken her adımda tetiklenir; onValueCommit yalnızca bir kez, işaretçi ya da tuş bırakıldığında. Pahalı her şey için ikincisini kullanın — sürüklemenin her pikseli için bir istek, bir kaydırıcının sunucuyu düşürmesinin olağan yoludur.

Sayfa başına sonuç20
Devre dışı40
Devre dışı aralık
import { Slider } from "@nili/ui"

export function Example() {
  return (
    <>
      <Slider
        label="Results per page"
        defaultValue={20}
        max={100}
        step={10}
        showValue
        onValueCommit={(value) => refetch(value)}
      />

      <Slider label="Disabled" defaultValue={40} disabled />
    </>
  )
}