Strengthbar

Component for displaying measurment.

Usage

Simple Usage

preview

<template>
  <p-strengthbar value="0" />
  <p-strengthbar value="1" />
  <p-strengthbar value="2" />
  <p-strengthbar value="3" />
  <p-strengthbar value="4" />
  <p-strengthbar value="5" />
  <p-strengthbar value="6" />
</template>

For Measuring Password

preview

<template>
  <p-input-password v-model="input" placeholder="Input your password" />
  <p-strengthbar :value="score" />
</template>

<script setup>
  import { ref } from 'vue-demi'
  import { usePasswordStrength } from '@privyid/persona/core'

  const input = ref('')
  const score = usePasswordStrength(input)
</script>

Min and Max

You can set lowest value and highest value for the value with prop min and max. It usefull when you combine it with Input Range. Default is 0 and 6

preview

<template>
  <p-input-range v-model="range" min="0" max="100" />
  <p-strengthbar :value="range" min="0" max="100"  />
</template>

Number of Bar

You can set number of bar with prop length.

preview

<template>
  <p-input-range v-model="length" min="1" max="12" />
  <p-input-range v-model="value" min="0" max="6" />
  <p-strengthbar :value="value" :length="length" />
</template>

API

Props

Props	Type	Default	Description
min	Number	0	Lowest value in range
max	Number	6	Highest value in range
value	Number	-	Active bar value
length	Number	6	Number of bar

Slots

Name	Description
There no slots here

Events

Name	Arguments	Description
There no props here

See Also

• Input Password
• Input Range