O componente Slider é usado para obter do usuário um valor dentre uma sequência de valores finitos. Muito utilizado quando se quer receber o feedback do usuário sobre o nível de satisfação de um produto ou serviço.
Figura 1 - Exemplo de imagem rodando no Browser
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome
Propriedade
Função
Configuração
options
Abre a janela de configurações do slider.
Título
content
Define um rótulo.
Valor
ng-model
Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.
Requerido
ng-required
Define que o campo é de preenchimento obrigatório.
Identificador
id
Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
Estilo
style
Altera o estilo geral do componente da forma inline.
Exibir
ng-show
Propriedade Angular usada para mostrar ou oculta o componente.
Repetir
crn-repeat
Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados.
Segurança
cronapp-security
Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis selecionados.
Classes CSS
class
Adiciona classes CSS que já foram criadas.
Aba de Estilos
Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Slider.
Nome em português
Nome em inglês
Descrição
Seta Esquerda
Arrow Left
Estiliza a seta esquerda do componente.
Seta Direita
Arrow Right
Estiliza a seta direita do componente.
Caminho
Track
Estiliza o caminho do componente.
Botão Arrastar
Drag Button
Estiliza botão arrastar do componente.
Título
Title
Estiliza o título do componente.
Configuração
A propriedade configuração abre a janela de personalização do componente, como definir os valores máximo e mínimo, os valores que são mostrados na barra e etc.
Figura 2 - Janela de configuração do slider
Título botão aumentar: texto exibido no tooltip do botão de incremento - internacionalize o texto clicando no ícone ao lado;
Título botão decrementar: texto exibido no tooltip do botão de decremento. - internacionalize o texto clicando no ícone ao lado;
Título alça de arraste: texto exibido no tooltip do botão de arrasto - internacionalize o texto clicando no ícone ao lado;
Valor mínimo: menor valor para a barra;
Valor máximo: maior valor para a barra;
Valor passo menor: define a quantidade de valores que serão pulados a cada arrasto - por exemplo, se colocar 2, o botão de arrasto nunca ficará em cima de números pares;
Valor passo maior: define a quantidade de valores que serão pulados na enumeração - por exemplo, se colocar 2, só serão enumerados os valores ímpares.