Formulário

Slider

/componentes/slider.mdmarkdown cru, para quem lê com agent em vez de olho

Com rótulo

Desconto25

Faixa

Faixa de valor20 – 60

Importar

import { Slider } from '@rivocode/ui'

Quando usar

Escolha de valor numa faixa: desconto, prazo, tolerancia.

Só vale quando o número exato não importa. Se importa, o NumberField diz mais e não pede pontaria: arrastar um pino até 37 e trabalho, digitar 37 não.

<Slider defaultValue={25} max={50} label="Desconto" showValue />

O label é o nome que o leitor de tela lê no pino, e não só o texto acima dele: um pino sem rótulo visível é que precisa de thumbLabel.

format escreve o número do showValue e o que o leitor de tela anuncia: o nome de um formatador da casa, ou uma função sua para a unidade que só esta tela tem.

<Slider defaultValue={30} max={90} label="Prazo" showValue format={(dias) => `${dias} dias`} />

Com dois valores, vira faixa de dois pinos, e cada pino precisa do próprio nome, senao o leitor de tela anuncia dois controles iguais:

<Slider
  defaultValue={[20, 60]}
  label="Faixa de valor"
  showValue
  thumbLabel={['Valor minimo', 'Valor maximo']}
/>

No React Native

Traduz: o @rivocode/ui-native exporta Slider - anda por gesto e responde às ações do leitor de tela; um valor só, e label obrigatório. A API não é a mesma do web (no nativo tudo é controlado), e a tabela de paridade diz o que muda peça a peça.

API

Prop	Tipo
`classNames`0.5.0 Classe por parte: `label`, `value`, `control`, `track`, `indicator`, `thumb`.	`Partial<Record<"control""indicator""label""thumb""track""value", string>>`
`defaultValue`0.4.0 The uncontrolled value of the slider when it's initially rendered.	`number \| readonly number[]`
`disabled`0.4.0 Whether the slider should ignore user interaction.	`boolean`
`form`0.4.0 Identifies the form that owns the slider inputs.	`string`
`format`0.4.0 Como o numero e escrito: nome de formatador da casa ou funcao propria, o mesmo vocabulario do eixo do grafico.	`Format`
`label`0.4.0 Texto acima do controle, e o nome que o leitor de tela le no pino.	`ReactNode`
`largeStep`0.4.0 The granularity with which the slider can step through values when using Page Up/Page Down or Shift + Arrow Up/Arrow Down.	`number`
`locale`0.4.0 The locale used by `Intl.NumberFormat` when formatting the value.	`LocalesArgument`
`max`0.4.0 The maximum allowed value of the slider.	`number`
`min`0.4.0 The minimum allowed value of the slider.	`number`
`minStepsBetweenValues`0.4.0 The minimum steps between values in a range slider.	`number`
`name`0.4.0 Identifies the field when a form is submitted.	`string`
`numberFormat`0.5.0 As opcoes do `Intl.NumberFormat`, para quem precisa delas.	`NumberFormatOptions`
`onValueChange`0.4.0 Callback function that is fired when the slider's value changed.	`((value: number \| readonly number[], eventDetails: SliderRootChangeEventDetails) => void)`
`onValueCommitted`0.4.0 Callback function that is fired when a value change is committed.	`((value: number \| readonly number[], eventDetails: SliderRootCommitEventDetails) => void)`
`orientation`0.4.0 The component orientation.	`Orientation`
`render`0.4.0 Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`ComponentRenderFn<HTMLProps, SliderRootState>ReactElement<unknown, stringJSXElementConstructor<any>>`
`showValue`0.4.0 Mostra o valor ao lado do rotulo.	`boolean`
`step`0.4.0 The granularity with which the slider can step through values.	`number`
`thumbAlignment`0.4.0 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	`"center""edge""edge-client-only"`
`thumbCollisionBehavior`0.4.0 Controls how thumbs behave when they collide during pointer interactions.	`"none""push""swap"`
`thumbLabel`0.4.0 O que o leitor de tela chama o pino, no lugar do `label`.	`string \| string[]`
`value`0.4.0 The value of the slider.	`number \| readonly number[]`

Além destas, a peça aceita className, style, id e children, repassados ao elemento de baixo.