Components
Sliding Number
Number that slides in with animation effects.
Sliding Number
The SlidingNumber component creates animated numbers that slide in with smooth animation effects. Each digit animates independently, creating a visually appealing counting experience.
Usage
0
0
0
0
<template>
<div class="p-4 space-y-4 flex flex-col items-center">
<MSlidingNumber :value="currentValue" />
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="changeNumber"
>
Change Number
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentValue = ref(1234)
const changeNumber = () => {
currentValue.value = Math.floor(Math.random() * 10000)
}
</script>
Props
value
number required
Value to display.
padStart
boolean
Pad single digits with leading zero.
decimalSeparator
string
Character to use as decimal separator.
precision
number | null
Number of decimal places to show.
Examples
Basic Sliding Number
Performance Metrics
Real-time statistics with smooth sliding animations
Response Time
Milliseconds
0
0
0
Uptime
Service availability
0
0
.0
Active Users
Current online
0
0
0
0
<template>
<div class="p-4 space-y-4">
<div>
<h3 class="text-lg font-medium mb-2">Basic Sliding Number</h3>
<MSlidingNumber :value="currentValue" />
</div>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="changeNumber"
>
Change Number
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentValue = ref(1234)
const changeNumber = () => {
currentValue.value = Math.floor(Math.random() * 10000)
}
</script>
With Decimals
With Decimals
0
0
0
0
.0
0
<template>
<div class="p-4 space-y-4">
<div>
<h3 class="text-lg font-medium mb-2">With Decimals</h3>
<MSlidingNumber :value="currentValue" />
</div>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="changeNumber"
>
Change Number
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentValue = ref(1234.56)
const changeNumber = () => {
currentValue.value = Math.random() * 10000
}
</script>
With Custom Precision
Custom Precision
0
0
0
0
.0
0
<template>
<div class="p-4 space-y-4">
<div>
<h3 class="text-lg font-medium mb-2">Custom Precision</h3>
<MSlidingNumber :value="currentValue" :precision="2" />
</div>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="changeNumber"
>
Change Number
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentValue = ref(1234.5)
const changeNumber = () => {
currentValue.value = Math.random() * 10000
}
</script>
With Padding
With Padding
0
0
<template>
<div class="p-4 space-y-4">
<div>
<h3 class="text-lg font-medium mb-2">With Padding</h3>
<MSlidingNumber :value="currentValue" :pad-start="true" />
</div>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="changeNumber"
>
Change Number
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentValue = ref(7)
const changeNumber = () => {
currentValue.value = Math.floor(Math.random() * 10)
}
</script>
Negative Numbers
Negative Number
-
0
0
0
<template>
<div class="p-4 space-y-4">
<div>
<h3 class="text-lg font-medium mb-2">Negative Number</h3>
<MSlidingNumber :value="currentValue" />
</div>
<button
class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
@click="changeNumber"
>
Change Number
</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const currentValue = ref(-123)
const changeNumber = () => {
currentValue.value = -Math.floor(Math.random() * 1000)
}
</script>