Controle deslizante

Uma entrada de gama polida na linguagem visual do BoardUI - faixa neutra, seleção de gradiente azul, polegares gravados e bolhas de valor exato. Use Slider para um valor ou RangeSlider para seleção min/max; ambos incluem entradas ocultas acessíveis, comportamento de arrastar, controles de teclado e suporte RTL através de React Aria.

Instalação

Você pode adicionar o componente de controle deslizante usando nosso CLI ou manualmente:

Modo escuro pronto - este componente segue tokens semânticos BoardUI automaticamente. Configurar a mudança de tema.

O CLI copia a fonte do componente (com suas dependências internas) em seu projeto e instala quaisquer pacotes npm necessários.

npx boardui@latest add slider

Usando um pacote de UI compartilhado ou aliases de importação personalizados? Configure seus caminhos de instalação antes de executar o CLI. Exemplos de copy-paste usam as importações padrão.

Intervalo mínimo e máximo

RangeSlider mostra dois polegares marcados. O intervalo selecionado preenche entre eles, cada bolha mostra o seu valor exato, e os polegares não podem cruzar. Use minValue, maxValue, e step para definir o intervalo permitido.

<RangeSlider label="Price range" defaultValue={[200, 800]} minValue={0} maxValue={1000} step={50} formatValue={(value) => currency.format(value)}/>

Valores controlados

Utilização valor e emMudança para o estado controlado vivo. onChangeEnd dispara após arrastar ou terminar a entrada do teclado, o que é útil para salvar um valor sem enviar uma atualização para cada movimento.

const [volume, setVolume] = useState(40);const [priceRange, setPriceRange] = useState([200, 800]); <Slider value={volume} onChange={setVolume} /> <RangeSlider value={priceRange} onChange={setPriceRange} onChangeEnd={(range) => saveRange(range)}/>

Valor das bolhas e estados

As bolhas de valor exato são visíveis por padrão. Formate- as com formatValue, ou definido showTooltip=false quando o valor já aparece em outro lugar. Os controles deslizantes desativados mantêm seus valores e rótulos acessíveis enquanto evitam a entrada.

<Slider defaultValue={64} /> {/* Hide the exact-value bubble when the surrounding UI shows the value */}<Slider defaultValue={36} showTooltip={false} /> <RangeSlider defaultValue={[20, 70]} isDisabled />