A entrada slider é uma versão avançada e altamente configurável da entrada nativa HTML range. Algumas adições notáveis em comparação com a entrada range padrão são:
Se você está familiarizado com o uso da entrada range HTML nativa, você verá que muitas das propriedades existentes com as quais você está familiarizado funcionam como esperado com a entrada slider.
Mesmo em sua forma mais simples, a entrada slider tem alguns truques na manga. Assim como a entrada range nativa, você pode usar as teclas de seta para ajustar o valor da entrada quando ela está focada — mas com a entrada slider, você pode segurar a tecla shift para incrementar em 10x e a tecla modificadora do seu sistema (command ou ctrl) para saltar para os valores mínimos/máximos.
Sempre que você tiver um manipulador focado em uma entrada slider, você pode digitar um valor no seu teclado e, após uma pequena demora, seu manipulador slider será definido para o valor fornecido — ou a correspondência disponível mais próxima.
Para renderizar dois manipuladores de valor em uma entrada slider, forneça um array como valor da entrada. Os manipuladores de controle podem ser arrastados um através do outro e o valor do array resultante sempre será retornado ordenado do menor para o maior.
Usando os slots maxHandleInner (padrão) e minHandleInner, você pode personalizar a aparência dos seus manipuladores slider. O slot maxHandleInner é usado para entradas slider de valor único.
Por padrão, os tooltips do slider são exibidos ao passar o mouse e quando um manipulador de seleção está sendo arrastado. Você pode forçar os tooltips para um estado ligado ou desligado usando a propriedade tooltip e fornecendo um valor booleano.
Ao fornecer uma função para a propriedade tooltip-format, você pode personalizar o valor do seu slider tooltip. Sua função tooltip-format receberá dois argumentos:
value: O valor atual que seria exibido no tooltip por padrão.
handle: O manipulador atual sendo afetado pela função. Pode ser min ou max.
Ao usar a propriedade tooltip-format, você pode introduzir variedade nas suas entradas de slider — especialmente quando combinado com o sistema de propriedades de classe section-key do FormKit.
Às vezes, uma entrada de estilo de intervalo é mais útil para os usuários se eles também puderem inserir valores numéricos diretamente em campos vinculados. Você pode revelar entradas de number que estão vinculadas aos valores dos manipuladores de intervalo do slider definindo a propriedade show-input como true.
As entradas de número vinculadas são entradas do FormKit. Você pode aplicar props a elas usando as props fornecidas:
input-attrs: vinculará o objeto fornecido por você a ambas as entradas min e max.min-input-attrs: Objeto para vincular à entrada min vinculada.max-input-attrs: Objeto para vincular à entrada max vinculada.A entrada de slider suporta a renderização de marcas na trilha da entrada. Ao definir a propriedade marks como true, as marcas serão renderizadas em cada intervalo de steps.
Você pode habilitar rótulos para suas marcas definindo a propriedade mark-labels como true.
Ao fornecer um array de objetos para a propriedade marks em vez de um booleano, você pode colocar marcas arbitrárias na trilha do slider. Os objetos de marca devem ter as seguintes propriedades:
at: A posição (valor) na trilha onde a marca deve ser renderizada.label: O rótulo a ser renderizado para a marca se a propriedade mark-labels estiver habilitada.class: Uma string de classes para aplicar ao elemento da marca.labelClasses: Uma string de classes para aplicar ao elemento do rótulo da marca.Ao fornecer marcas personalizadas, você pode querer forçar a seleção a aderir às marcas fornecidas. Isso pode ser alcançado com a propriedade snap-to-marks. Quando snap-to-marks é true, eventos de teclado irão saltar para a marca mais próxima e valores inseridos através do teclado ou entradas vinculadas irão aderir à marca disponível mais próxima.
Você pode aplicar classes personalizadas às suas marcas e etiquetas de marca usando as propriedades class e labelClasses em seus objetos de marca.
Por padrão, a entrada slider escala valores linearmente em toda a sua faixa. No entanto, você pode usar as propriedades scaling-function ou intervals para alterar esse comportamento.
A propriedade scaling-function aceita 3 valores:
linear — este é o comportamento padrãolog que aplicará uma função de escalonamento logarítmico ao seu sliderforward e reverse que aplicarão sua própria lógica de escalonamento.A propriedade intervals aceita um array de objetos onde cada objeto define um intervalo de alcance no slider. Cada objeto contém:
value: O ponto no slider onde o intervalo começastep: O tamanho do passo que deve ser usado dentro do intervaloSeu último intervalo cobrirá o alcance que se estende do seu value especificado até o valor da propriedade max no seu slider. Se o seu intervalo mais baixo não começar no valor mínimo possível do seu slider, então um intervalo cobrindo o alcance do valor min da propriedade do seu slider até o seu primeiro intervalo será criado para você. Seu valor de step será o valor da propriedade step na entrada do seu slider.
É importante notar que a representação visual dos intervalos na pista de um slider é baseada no número total de passos possíveis dentro de um dado intervalo e não no valor numérico bruto do intervalo.
Você pode renderizar um gráfico de barras acima do controle deslizante com valores arbitrários fornecendo um array para a propriedade chart. O array chart tem uma estrutura semelhante ao array marks. Cada objeto aninhado deve conter:
at: A posição (valor) na pista onde a barra para o gráfico deve ser renderizada.value: Um valor numérico que será usado para calcular a altura relativa da barra no gráfico.A entrada slider iterará sobre o seu array chart e determinará o maior value contido no array, e então dividirá todos os outros valores por esse maior valor para determinar as alturas relativas para renderizar as barras do gráfico.
Ao combinar as propriedades fornecidas para o componente slider, você pode criar uma entrada robusta para cobrir uma variedade de casos de uso. Aqui está um exemplo de um controle deslizante de faixa de preço.
| Prop | Type | Padrão | Descrição |
|---|---|---|---|
| chart | array | none | Um array de objetos contendo as chaves at e value. Renderiza um gráfico de barras de altura relativa acima da trilha do controle deslizante. |
| input-attrs | object | {} | Aplica atributos personalizados aos inputs FormKit aninhados vinculados para os valores mínimo e máximo. |
| intervals | array | none | Um array de valores de intervalo consistindo de value e step usados para definir escalonamento diferenciado para diferentes seções da trilha do controle deslizante. |
| marks | boolean || array | false | Quando true, renderiza marcas na trilha a cada valor de step. Quando um Array de objetos com as chaves at e label, renderiza uma marca na trilha no valor de at de cada objeto. |
| mark-labels | boolean | false | Habilita a renderização de etiquetas abaixo das marcas na trilha |
| max | number | 100 | O valor máximo possível da faixa do controle deslizante. |
| max-input-attrs | object | {} | Aplica atributos personalizados ao input FormKit aninhado vinculado para o valor máximo. |
| min | number | 0 | O valor mínimo possível da faixa do controle deslizante. |
| min-input-attrs | object | {} | Aplica atributos personalizados ao input FormKit aninhado vinculado para o valor mínimo. |
| prefix | string | none | Caracteres que sempre aparecerão no início do input. |
| scaling-function | string || object | linear | Define o comportamento de escalonamento para valores na trilha do controle deslizante renderizado usando uma string de valor predefinido ou um conjunto de funções personalizadas. |
| show-input | boolean | false | Renderiza input(s) FormKit do type="number" que estão vinculados ao(s) valor(es) do controle deslizante |
| snap-to-marks | boolean | false | Quando habilitado, força a seleção do usuário a se ajustar às marcas |
| step | number | 1 | O valor mínimo pelo qual o valor do controle deslizante pode incrementar / decrementar. |
| suffix | string | none | Caracteres que sempre aparecerão no final do input. |
| tooltip | boolean | none | Quando definido com um valor booleano, força a exibição do(s) tooltip(s) do manipulador do controle deslizante. |
| tooltip-format | function | none | Uma função que é fornecida o value e o handle para cada manipulador do controle deslizante que deve retornar uma string. |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais. |
| index | Number | undefined | Permite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai. |
| prefix-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo. |
| sections-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {label prop} | Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name. |
| validation-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
Você pode direcionar uma seção específica de uma entrada usando a "key" dessa seção, permitindo que você modifique as classes, HTML (por meio de :sections-schema ou o conteúdo (por meio de slots) dessa seção). Saiba mais sobre as seções aqui.
| Section-key | Descrição |
|---|---|
| chart | Um contêiner para os elementos da barra do gráfico. |
| chartBar | Uma barra individual para o elemento do gráfico. |
| fill | O preenchimento para a faixa selecionada no controle deslizante. |
| handleMax | O manipulador de seleção de valor máximo. Este é o manipulador padrão para controles deslizantes de valor único. |
| handleMin | O manipulador de seleção de valor mínimo. |
| handles | Um contêiner para os manipuladores de seleção da faixa |
| linkedValues | Um invólucro para as entradas vinculadas aos valores mínimo e máximo do controle deslizante. |
| mark | Uma marca individual na faixa. |
| markLabel | O rótulo para uma marca individual na faixa. |
| marks | Um contêiner para todas as marcas na faixa |
| maxValue | A entrada numérica do FormKit vinculada para o valor máximo do controle deslizante. Se o controle deslizante tiver apenas um valor, isso é renderizado como um descendente direto da seção sliderInner. |
| minValue | A entrada numérica do FormKit vinculada para o valor mínimo do controle deslizante. |
| sliderInner | A div interior que contém o conteúdo do controle deslizante. |
| track | Um invólucro que contém toda a marcação da faixa para o controle deslizante. |
| trackInner | Um invólucro interior para fins de estilo que contém toda a marcação da faixa, excluindo o gráfico. |
| trackWrapper | Um invólucro que contém toda a marcação da faixa, excluindo o gráfico. |
| tooltipMin | A dica para o manipulador de seleção de valor mínimo |
| tooltipMax | A dica para o manipulador de seleção de valor máximo |
| Mostrar Universal section keys | |
| outer | O elemento de envolvimento mais externo. |
| wrapper | Um invólucro ao redor do rótulo e do input. |
| label | O rótulo do input. |
| prefix | Por padrão, não gera saída, mas permite conteúdo diretamente antes de um elemento input. |
| prefixIcon | Um elemento para gerar um ícone antes da seção de prefixo. |
| inner | Um invólucro ao redor do próprio elemento input. |
| suffix | Por padrão, não gera saída, mas permite conteúdo diretamente após um elemento input. |
| suffixIcon | Um elemento para gerar um ícone após a seção de sufixo. |
| input | O próprio elemento input. |
| help | O elemento que contém o texto de ajuda. |
| messages | Um invólucro ao redor de todas as mensagens. |
| message | O elemento (ou muitos elementos) que contém uma mensagem - na maioria das vezes mensagens de validação e erros. |
Todos os campos de entrada do FormKit são projetados com as seguintes considerações de acessibilidade em mente. Ajude-nos a melhorar continuamente a acessibilidade para todos, relatando problemas de acessibilidade aqui:
| Chave de Seção | Atributo | Padrão | Descrição |
|---|---|---|---|
| maxValue | tabindex | -1 | Prioriza a ordem de foco do teclado definindo-a como -1 quando a entrada está desativada. |
| minValue | tabindex | -1 | Prioriza a ordem de foco do teclado definindo-a como -1 quando a entrada está desativada. |
| handleMax | tabindex | -1 or 0 | Prioriza a ordem de foco do teclado definindo-a como -1 quando a entrada está desativada e 0 quando não está. |
| handleMin | tabindex | -1 or 0 | Prioriza a ordem de foco do teclado definindo-a como -1 quando a entrada está desativada e 0 quando não está. |
| Mostrar Universal chave de seção | |||
| label | label | for | Associa isso a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| input | input | disabled | Desabilita um elemento HTML, impedindo a interação do usuário e sinalizando um estado não interativo |
| aria-describedby | Aprimora a acessibilidade associando um elemento a uma descrição, auxiliando leitores de tela | ||
| aria-required | Adiciona o estado necessário quando a validação é exigida. | ||
| icon | icon | for | Sempre que um ícone é definido como rótulo, ele o vincula a um elemento de entrada, aprimorando acessibilidade e experiência do usuário |
| Evento de Teclado | Descrição |
|---|---|
| Tab | Move o foco para a próxima entrada focalizável na página. |
| Shift + Tab | Move o foco para a entrada focalizável anterior na página. |