Slider

O Slider permitem que os usuários façam seleções a partir de um intervalo de valores.

Importação

import { Slider } from '@escaletech/delta'

Utilização

Editor de código

<div style={{background: 'white', padding: '20px'}}> <Slider min={0} max={100} /> </div>

<div style={{background: 'white', padding: '20px'}}>
  <Slider min={0} max={100} />
</div>

Resultado

Loading...

Multi valores

Passe o valor multi para a propriedade range para que o usuário possa selecionar 2 valores. Por padrão é single.

Editor de código

<div style={{background: 'white', padding: '20px'}}> <Slider range='multi' name='range' min={0} max={100} /> </div>

<div style={{background: 'white', padding: '20px'}}>
  <Slider
    range='multi'
    name='range'
    min={0}
    max={100}
  />
</div>

Resultado

Loading...

Customização

Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na página de documentação de tema.

import { extendsTheme } from '@escaletech/delta'

export const theme = extendsTheme({
  colors: {
    // customiza as cores do componente
    sliderThumbColor: 'blue',
    sliderRangeColor: 'red'
  }
})

Tokens

Token	Descrição
colors.formFieldBackgroundColorDisabled	Cor de fundo quando o componente está desabilitado
colors.formFieldBorderColor	Cor da borda do componente

Props

Slider single range

Propriedade	Descrição	Tipo	Padrão	Obrigatório
min	Label do valor mínimo	number	-	✅
max	Label do valor máximo	number	-	✅

Aceita todos as propriedades suportados por inputs do tipo range nativos.

Slider multi range

Propriedade	Descrição	Tipo	Padrão	Obrigatório
min	Valor mínimo do slider	number	-	✅
max	Valor máximo do slider	number	-	✅
value	Valores dos ranges	[number, number]	[min, max]	❌
name	Name do componente	string	-	✅
onChange	Função quando é afetado o valor	(event: React.ChangeEvent<HTMLInputElement>) => void	-	❌
customMinLabel	Label do valor mínimo	string	-	❌
customMaxLabel	Label do valor máximo	string	-	❌
maxInputClassName	Classe da bolinha do max	string	-	❌
minInputClassName	Classe da bolinha do min	string	-	❌
maxInputId	Id da bolinha do max	string	-	❌
minInputId	Id da bolinha do min	string	-	❌