@mamba/range

11.0.0 • Public • Published

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>

Readme

Keywords

none

Package Sidebar

Install

npm i @mamba/range

Weekly Downloads

22

Version

11.0.0

License

Apache-2.0

Unpacked Size

50.6 kB

Total Files

6

Last publish

Collaborators

  • rrelias
  • guiguimartins
  • agjunior
  • janileodantas
  • mambaweb
  • jaikmestone