W3cubDocs

/VueUse

useClamp

Category @Math

Export Size 214 B

Package @vueuse/math

Last Changed last week

Category	@Math
Export Size	214 B
Package	`@vueuse/math`
Last Changed	last week

Reactively clamp a value between two other values.

Usage

import { useClamp } from '@vueuse/math'

const min = ref(0)
const max = ref(10)
const value = useClamp(0, min, max)

You can also pass a ref and the returned computed will be updated when the source ref changes:

import { useClamp } from '@vueuse/math'

const number = ref(0)
const clamped = useClamp(number, 0, 10)

Type Declarations

export declare function useClamp(
  value: ReadonlyRefOrGetter<number>,
  min: MaybeRefOrGetter<number>,
  max: MaybeRefOrGetter<number>
): ComputedRef<number>
export declare function useClamp(
  value: MaybeRefOrGetter<number>,
  min: MaybeRefOrGetter<number>,
  max: MaybeRefOrGetter<number>
): Ref<number>

Source

Source • Demo • Docs