> ## Documentation Index > Fetch the complete documentation index at: https://docs.twenty.com/llms.txt > Use this file to discover all available pages before exploring further. # Glisor > Alegeți o valoare numerică sau un interval folosind butoane glisante accesibile cu tastatura. ## 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`. **Light** [Exemplu de glisor (light)](https://storybook.twenty.com/iframe.html?id=ui-input-slider--display\&viewMode=story\&globals=colorScheme:light) **Dark** [Exemplu de glisor (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-slider--display\&viewMode=story\&globals=colorScheme:dark) [Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-slider--display) ## Utilizare ### Stare necontrolată Utilizează `defaultValue` pentru a seta volumul inițial. Glisorul controlează modificările ulterioare. ```tsx theme={null} import { Slider } from 'twenty-ui/primitives/input'; import { Text } from 'twenty-ui/primitives/typography'; export const VolumeSlider = () => ( } style={{ display: 'flex', justifyContent: 'space-between' }} > Volume ); ``` ## Opțiuni vizuale Comparați culorile de accent și de succes la valorile minime, medii, maxime și dezactivate. Glisoarele activate rămân interactive. **Light** [Opțiuni vizuale pentru glisor (light)](https://storybook.twenty.com/iframe.html?id=ui-input-slider--catalog\&viewMode=story\&globals=colorScheme:light) **Dark** [Opțiuni vizuale pentru glisor (dark)](https://storybook.twenty.com/iframe.html?id=ui-input-slider--catalog\&viewMode=story\&globals=colorScheme:dark) [Open in Storybook](https://storybook.twenty.com/?path=/story/ui-input-slider--catalog) ## 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. ```text theme={null} 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. ```tsx theme={null} import { useState } from 'react'; import { Slider } from 'twenty-ui/primitives/input'; export const VolumeSlider = () => { const [volume, setVolume] = useState(40); return ( Volume ); }; ``` 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 ```tsx theme={null} import { Slider } from 'twenty-ui/primitives/input'; export const PriceRange = () => ( Price range ); ``` 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. > [!NOTE] > > 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](https://github.com/mui/base-ui/issues/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](https://github.com/mui/base-ui/pull/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\` pentru helperi cu o singură valoare sau `SliderRootProps\` 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 **Root.className** `string | ((state: SliderRootState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Root.color** `"accent" | "success"` (default: accent) Color of the indicator and thumbs. **Root.defaultValue** `number | readonly number[]` The uncontrolled value of the slider when it's initially rendered. To render a controlled slider, use the `value` prop instead. **Root.disabled** `boolean` (default: false) Whether the slider should ignore user interaction. **Root.form** `string` Identifies the form that owns the slider inputs. Useful when the slider is rendered outside the form. **Root.format** `NumberFormatOptions` Options to format the value. **Root.largeStep** `number` (default: 10) The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down. **Root.locale** `LocalesArgument` The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale. **Root.max** `number` (default: 100) The maximum allowed value of the slider. Should not be equal to min. **Root.min** `number` (default: 0) The minimum allowed value of the slider. Should not be equal to max. **Root.minStepsBetweenValues** `number` (default: 0) The minimum steps between values in a range slider. **Root.name** `string` Identifies the field when a form is submitted. **Root.onValueChange** `((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 **Root.onValueCommitted** `((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 **Root.orientation** `"horizontal" | "vertical"` (default: horizontal) The component orientation. **Root.render** `ReactElement\\> | ComponentRenderFn\` 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. **Root.step** `number` (default: 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. **Root.style** `CSSProperties | ((state: SliderRootState) =\> CSSProperties | undefined)` Style applied to the element, or a function that returns a style object based on the component's state. **Root.thumbAlignment** `"center" | "edge-client-only" | "edge"` (default: 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 **Root.thumbCollisionBehavior** `"none" | "push" | "swap"` (default: 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. **Root.value** `number | readonly number[]` The value of the slider. For range sliders, provide an array with one value per thumb. ### Slider.Control **Control.className** `string | ((state: SliderControlState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Control.render** `ReactElement\\> | ComponentRenderFn\` 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. **Control.style** `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 **Track.className** `string | ((state: SliderTrackState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Track.render** `ReactElement\\> | ComponentRenderFn\` 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. **Track.style** `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 **Indicator.className** `string | ((state: SliderIndicatorState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Indicator.render** `ReactElement\\> | ComponentRenderFn\` 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. **Indicator.style** `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 **Thumb.aria-valuetext** `string` A string value forwarded to the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`. Ignored when `getAriaValueText` is provided. **Thumb.className** `string | ((state: SliderThumbState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Thumb.disabled** `boolean` (default: false) Whether the thumb should ignore user interaction. **Thumb.getAriaLabel** `((index: number) =\> string) | null` A function which returns a string value for the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) attribute of the `input`. **Thumb.getAriaValueText** `((formattedValue: string, value: number, index: number) =\> string) | null` A function which returns a string value for the [`aria-valuetext`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-valuetext) attribute of the `input`. This is important for screen reader users. **Thumb.index** `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. **Thumb.inputRef** `Ref\` A ref to access the nested input element. **Thumb.onBlur** `FocusEventHandler\` A blur handler forwarded to the `input`. **Thumb.onFocus** `FocusEventHandler\` A focus handler forwarded to the `input`. **Thumb.onKeyDown** `KeyboardEventHandler\` A keydown handler forwarded to the `input`. **Thumb.render** `ReactElement\\> | ComponentRenderFn\` 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. **Thumb.style** `CSSProperties | ((state: SliderThumbState) =\> CSSProperties | undefined)` Style applied to the element, or a function that returns a style object based on the component's state. **Thumb.tabIndex** `number` Optional tab index attribute forwarded to the `input`. ### Slider.Label **Label.className** `string | ((state: SliderRootState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Label.render** `ReactElement\\> | ComponentRenderFn\` 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. **Label.style** `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 **Value.className** `string | ((state: SliderValueState) =\> string | undefined)` CSS class applied to the element, or a function that returns a class based on the component's state. **Value.render** `ReactElement\\> | ComponentRenderFn\` 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. **Value.style** `CSSProperties | ((state: SliderValueState) =\> CSSProperties | undefined)` Style applied to the element, or a function that returns a style object based on the component's state. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.