createNumeric

Pure numeric math for bounded values. Snap to step, clamp to range, convert between values and percentages, with floating-point precision correction.

Copy Markdown

IntermediateApr 4, 2026

Usage

import { createNumeric } from '@vuetify/v0'

const numeric = createNumeric({ min: 0, max: 100, step: 5 })

numeric.snap(47)        // 45
numeric.snap(48)        // 50
numeric.up(50)          // 55
numeric.down(50)        // 45
numeric.floor()         // 0
numeric.ceil()          // 100
numeric.fromValue(50)   // 50 (percentage)
numeric.fromPercent(33) // 30 (snapped value)
numeric.canUp(100)      // false
numeric.canDown(0)      // false

Architecture

Reactivity

createNumeric is a pure function factory — it returns plain functions, not reactive refs. This makes it composable with any reactive system.

Method	Returns	Description
`snap(value)`	`number`	Round to nearest step, clamp to [min, max]
`up(value, multiplier?)`	`number`	Increment by step × multiplier
`down(value, multiplier?)`	`number`	Decrement by step × multiplier
`floor()`	`number`	Return min value
`ceil()`	`number`	Return max value
`fromValue(value)`	`number`	Convert value to 0–100 percentage
`fromPercent(percent)`	`number`	Convert percentage to snapped value
`canUp(value)`	`boolean`	Whether increment is possible
`canDown(value)`	`boolean`	Whether decrement is possible

Examples

50% of range

<script setup lang="ts">
  import { createNumeric } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const numeric = createNumeric({ min: 0, max: 100, step: 5 })
  const value = shallowRef(50)
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <div class="flex items-center gap-2">
      <button
        class="px-3 py-1 rounded border"
        :disabled="!numeric.canDown(value)"
        @click="value = numeric.down(value)"
      >
        −
      </button>

      <span class="w-16 text-center text-2xl font-bold tabular-nums">
        {{ value }}
      </span>

      <button
        class="px-3 py-1 rounded border"
        :disabled="!numeric.canUp(value)"
        @click="value = numeric.up(value)"
      >
        +
      </button>
    </div>

    <div class="text-sm opacity-60">
      {{ numeric.fromValue(value).toFixed(0) }}% of range
    </div>
  </div>
</template>