Glisor

Prezentare generală

Slider acceptă un singur număr sau o matrice de numere pentru un interval. Compuneți eticheta, șina, indicatorul și butoanele glisante în interiorul Root.

Utilizare

Stare necontrolată

Utilizează defaultValue pentru a seta volumul inițial. Glisorul controlează modificările ulterioare.

import { Slider } from 'twenty-ui/primitives/input';
import { Text } from 'twenty-ui/primitives/typography';

export const VolumeSlider = () => (
  <Slider.Root name="volume" defaultValue={40} min={0} max={100} step={1}>
    <Text
      render={<div />}
      style={{ display: 'flex', justifyContent: 'space-between' }}
    >
      <Slider.Label>Volume</Slider.Label>
      <Slider.Value />
    </Text>
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        <Slider.Thumb />
      </Slider.Track>
    </Slider.Control>
  </Slider.Root>
);

Opțiuni vizuale

Comparați culorile de accent și de succes la valorile minime, medii, maxime și dezactivate. Glisoarele activate rămân interactive.

Anatomie

Plasați pista și cursoarele în interiorul Slider.Control, care gestionează interacțiunea cu indicatorul. Acest arbore prezintă un glisor cu un singur cursor.

Slider.Root
├── Slider.Label
├── Slider.Value
└── Slider.Control
    └── Slider.Track
        ├── Slider.Indicator
        └── Slider.Thumb

Parte	Cerință	Scop
`Root`	Obligatoriu	Deține valoarea, limitele, pasul și orientarea.
`Control`	Obligatoriu	Gestionează interacțiunea cu indicatorul și poziționează cursoarele.
`Track`	Necesar pentru pista stilizată	Afișează întregul interval de valori.
`Thumb`	Unul pentru fiecare valoare reglabilă	Oferă un mâner focalizabil cu interacțiune prin tastatură.
`Label`	Recomandat	Furnizează o etichetă vizibilă; fiecare cursor are nevoie de un nume accesibil.
`Valoare`	Opțional	Afișează valoarea numerică actuală.
`Indicator`	Opțional	Afișează porțiunea selectată a șinei.

Pentru un interval, adăugați un cursor pentru fiecare valoare, cu index corespunzător și un nume accesibil distinct. Etichetele și ieșirea numerică rămân în afara Control, astfel încât să nu devină parte din zona care poate fi glisată.

Stare controlată

Transmite value și actualizează-l cu onValueChange pentru a controla același volum în starea React. Funcția de apel invers primește următoarea valoare și detaliile evenimentului.

import { useState } from 'react';
import { Slider } from 'twenty-ui/primitives/input';

export const VolumeSlider = () => {
  const [volume, setVolume] = useState(40);

  return (
    <Slider.Root
      name="volume"
      value={volume}
      onValueChange={setVolume}
      min={0}
      max={100}
      step={1}
    >
      <Slider.Label>Volume</Slider.Label>
      <Slider.Value />
      <Slider.Control>
        <Slider.Track>
          <Slider.Indicator />
          <Slider.Thumb />
        </Slider.Track>
      </Slider.Control>
    </Slider.Root>
  );
};

Utilizează onValueChange pentru a menține actualizată valoarea controlată în timpul unei interacțiuni. onValueCommitted gestionează valoarea finală când interacțiunea se încheie, de exemplu pentru a o salva. Ambele funcții de apel invers sunt disponibile și în modul necontrolat, fără a prelua controlul asupra valorii. Detaliile modificării includ event de origine, reason al interacțiunii, activeThumbIndex și cancel(). Detaliile confirmării utilizează contractul generic de evenimente al Base UI și nu includ anularea modificării. O modificare anulată nu se confirmă.

Interval

import { Slider } from 'twenty-ui/primitives/input';

export const PriceRange = () => (
  <Slider.Root
    defaultValue={[25, 75]}
    min={0}
    max={100}
    minStepsBetweenValues={10}
  >
    <Slider.Label>Price range</Slider.Label>
    <Slider.Value />
    <Slider.Control>
      <Slider.Track>
        <Slider.Indicator />
        <Slider.Thumb index={0} aria-label="Minimum price" />
        <Slider.Thumb index={1} aria-label="Maximum price" />
      </Slider.Track>
    </Slider.Control>
  </Slider.Root>
);

Oferiți butoanelor glisante ale intervalului nume accesibile distincte și un index corespunzător valorii lor. minStepsBetweenValues stabilește diferența minimă în pași. Tipul generic de valoare al rădăcinii este un număr sau o matrice de numere doar pentru citire. Pentru a controla un interval, stochează matricea în starea React și transmite-o prin value și onValueChange, la fel ca pentru o singură valoare.

Tastatură și aspect

Tastele săgeată ajustează cu un pas un buton glisant focalizat. Home și End îl deplasează spre limite, respectând constrângerile intervalului. orientation="vertical" modifică aspectul și direcția tastaturii. Utilizați disabled pe Root pentru a preveni modificările. Setați color="success" pentru paleta alternativă; valoarea implicită este accent. Valoarea implicită pentru thumbAlignment este edge. Transmite center sau edge-client-only pentru a o suprascrie. Compunerea nativă cu className, style și render rămâne disponibilă pentru fiecare parte, inclusiv pentru funcțiile de stare.

Cu alinierea edge și edge-client-only, Base UI 1.8 și 1.9 nu măsoară din nou niciodată un mâner după ce Slider.Control își modifică dimensiunea, iar un glisor montat în timp ce este ascuns își păstrează mânerele ascunse după ce devine vizibil (mui/base-ui#5995). Componentele frontale React întâmpină aceeași problemă la prima lor randare. Utilizați thumbAlignment="center" până când o versiune Base UI include remedierea (mui/base-ui#6000).

Integrare nativă și tipuri

Slider.Root deduce un număr sau un array numeric readonly din value sau defaultValue, păstrând acel tip în ambele callback-uri. SliderRootProps acceptă implicit ambele variante; utilizează SliderRootProps\<number> pentru helperi cu o singură valoare sau SliderRootProps\<readonly number[]> pentru helperi de interval. Fiecare parte are un tip de props exportat în twenty-ui/primitives/input: SliderRootProps, SliderControlProps, SliderTrackProps, SliderIndicatorProps, SliderThumbProps, SliderLabelProps și SliderValueProps. Referințele vizează elemente div pentru Root, Control, Track, Indicator, Thumb și Label, precum și un element output pentru Value. Referința unui Thumb vizează mânerul său vizibil; numele său accesibil și valoarea sa nativă de formular aparțin inputului de interval imbricat. Utilizează name și form pe Root pentru trimiterea nativă, cu câte un input pentru fiecare valoare din interval.

Proprietăți

Referința este generată din tipurile componentei publice. Atributele native, inclusiv numele accesibile și gestionarele de evenimente, sunt acceptate și pe părțile care redau elemente.

Slider.Root

string | ((state: SliderRootState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

"accent" | "success"

implicit:"accent"

Color of the indicator and thumbs.

number | readonly number[]

The uncontrolled value of the slider when it’s initially rendered.To render a controlled slider, use the value prop instead.

boolean

implicit:"false"

Whether the slider should ignore user interaction.

string

Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form.

NumberFormatOptions

Options to format the value.

number

implicit:"10"

The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.

LocalesArgument

The locale used by Intl.NumberFormat when formatting the value. Defaults to the user’s runtime locale.

number

implicit:"100"

The maximum allowed value of the slider. Should not be equal to min.

number

implicit:"0"

The minimum allowed value of the slider. Should not be equal to max.

number

implicit:"0"

The minimum steps between values in a range slider.

string

Identifies the field when a form is submitted.

((value: TValue extends number ? number : TValue, eventDetails: SliderRootChangeEventDetails) => void)

Callback function that is fired when the slider’s value changed. Receives the new value as the first argument; the originating event is available as eventDetails.event. The value is also reflected on eventDetails.event.target.value for form integration.The eventDetails.reason indicates what triggered the change:

'input-change' when the hidden range input emits a change event (for example, via form integration)
'track-press' when the control track is pressed
'drag' while dragging a thumb
'keyboard' for keyboard input
'none' when the change is triggered without a specific interaction

((value: TValue extends number ? number : TValue, eventDetails: SliderRootCommitEventDetails) => void)

Callback function that is fired when a value change is committed. Does not fire if the value did not change, or if the change was canceled. Warning: This is a generic event, not a change event.The eventDetails.reason indicates what triggered the commit:

'drag' while dragging a thumb
'track-press' when the control track is pressed
'keyboard' for keyboard input
'input-change' when the hidden range input emits a change event (for example, via form integration)
'none' when the commit occurs without a specific interaction

"horizontal" | "vertical"

implicit:"horizontal"

The component orientation.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

number

implicit:"1"

The granularity with which the slider can step through values. (A “discrete” slider.) The min prop serves as the origin for the valid values. We recommend (max - min) to be evenly divisible by the step.

CSSProperties | ((state: SliderRootState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

"center" | "edge-client-only" | "edge"

implicit:"edge"

How the thumb(s) are aligned relative to Slider.Control when the value is at min or max:

center: The center of the thumb is aligned with the control edge
edge: The thumb is inset within the control such that its edge is aligned with the control edge
edge-client-only: Same as edge but renders after React hydration on the client, reducing bundle size in return

"none" | "push" | "swap"

implicit:"push"

Controls how thumbs behave when they collide during pointer interactions.

'push' (default): Thumbs push each other without restoring their previous positions when dragged back.
'swap': Thumbs swap places when dragged past each other.
'none': Thumbs cannot move past each other; excess movement is ignored.

number | readonly number[]

The value of the slider. For range sliders, provide an array with one value per thumb.

Slider.Control

string | ((state: SliderControlState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderControlState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderControlState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Track

string | ((state: SliderTrackState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderTrackState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderTrackState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Indicator

string | ((state: SliderIndicatorState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderIndicatorState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderIndicatorState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Thumb

string

A string value forwarded to the aria-valuetext attribute of the input. Ignored when getAriaValueText is provided.

string | ((state: SliderThumbState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

boolean

implicit:"false"

Whether the thumb should ignore user interaction.

((index: number) => string) | null

A function which returns a string value for the aria-label attribute of the input.

((formattedValue: string, value: number, index: number) => string) | null

A function which returns a string value for the aria-valuetext attribute of the input. This is important for screen reader users.

number

The index of the thumb which corresponds to the index of its value in the value or defaultValue array. This prop is required to support server-side rendering for range sliders with multiple thumbs.

Ref<HTMLInputElement>

A ref to access the nested input element.

FocusEventHandler<HTMLInputElement>

A blur handler forwarded to the input.

FocusEventHandler<HTMLInputElement>

A focus handler forwarded to the input.

KeyboardEventHandler<HTMLInputElement>

A keydown handler forwarded to the input.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderThumbState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderThumbState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

number

Optional tab index attribute forwarded to the input.

Slider.Label

string | ((state: SliderRootState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderRootState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderRootState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Slider.Value

string | ((state: SliderValueState) => string | undefined)

CSS class applied to the element, or a function that returns a class based on the component’s state.

ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SliderValueState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.Accepts a ReactElement or a function that returns the element to render.

CSSProperties | ((state: SliderValueState) => CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.

Dezvoltatori

Aplicații

API

Autogazda

Contribuie

Biblioteca UI

Prezentare generală

Utilizare

Stare necontrolată

Opțiuni vizuale

Anatomie

Stare controlată

Interval

Tastatură și aspect

Integrare nativă și tipuri

Proprietăți

Slider.Root

Slider.Control

Slider.Track

Slider.Indicator

Slider.Thumb

Slider.Label

Slider.Value

​Prezentare generală

​Utilizare

​Stare necontrolată

​Opțiuni vizuale

​Anatomie

​Stare controlată

​Interval

​Tastatură și aspect

​Integrare nativă și tipuri

​Proprietăți

​Slider.Root

​Slider.Control

​Slider.Track

​Slider.Indicator

​Slider.Thumb

​Slider.Label

​Slider.Value

Prezentare generală

Utilizare

Stare necontrolată

Opțiuni vizuale

Anatomie

Stare controlată

Interval

Tastatură și aspect

Integrare nativă și tipuri

Proprietăți

Slider.Root

Slider.Control

Slider.Track

Slider.Indicator

Slider.Thumb

Slider.Label

Slider.Value