@mamba/range

Range

O módulo Range pode ser usado para representar um valor dentro de um intervalo, que pode ser alterado a partir dos botões nas laterais.

Propriedades	Descrição	Tipo	Padrão
value	valor escolhido	int	50
step	intervalo entre valores	int	10
max	valor máximo	int	100
min	valor mínimo	int	0
mainColor	cor do progresso e botões	string (hex)	#3da10f
barColor	cor de fundo	string (hex)	#000
textColor	cor do texto	string (hex)	#404040
icon	ícone que será apresentado ao lado do texto	string	undefined
unit	unidade de valor	string (%,x...)	undefined
validation	função de validação que impede mudança de valor caso retorne falso	function	undefined

Eventos

<Range ... on:event="..."/>

Eventos	Disparado quando ...	Tipo
decrement	O valor é decrescido	function(int)
increment	O valor é aumentado	function(int)

Métodos

increment()

Aumenta em uma unidade do Step o valor atual do Range.

decrement()

Diminui em uma unidade do Step o valor atual do Range.

Validação

Às vezes o valor mínimo e máximo de um intervalo não representa, de fato, o valor mínimo/máximo que o usuário pode selecionar. Para estes casos, é possível usar a prop validation para validar o novo valor. Basta passar uma função que receberá o novo possível valor.

<Range validation="{rangeValidation}" />

<script>
  export {
    components: {
      Range: '@mamba/range',
    },
    data() {
      return {
        /** Limita o valor entre 20 e 80 */
        rangeValidation: value => value >= 20 && value <= 80,
      };
    },
  }
</script>