Codi
function mix(v1: number, v2: number, alpha: number): number {
return v1 * (1 - alpha) + v2 * alpha;
}
Paràmetres
| Paràmetre | Descripció |
|---|---|
v1 | Valor inicial. |
v2 | Valor final. |
alpha | Factor de mescla entre 0 (v1) i 1 (v2). |
Exemple amb Nuxt
<script setup lang="ts">
const mix = (v1: number, v2: number, alpha: number) =>
v1 * (1 - alpha) + v2 * alpha
const slider = ref(50)
const normalized = computed(() => slider.value / 100)
const fontSize = computed(() => mix(16, 72, normalized.value))
const borderRadius = computed(() => mix(4, 32, normalized.value))
</script>
<template>
<input type="range" min="0" max="100" v-model.number="slider" />
<div
class="card"
:style="{
fontSize: fontSize + 'px',
borderRadius: borderRadius + 'px'
}"
>
Títol adaptable
</div>
</template>
<style scoped>
.card {
padding: 1.5rem;
background: #f1f5f9;
font-weight: 600;
}
input[type="range"] {
width: 100%;
margin-bottom: 1rem;
}
</style>