Skip to content

useClamp

Category
Export Size
214 B
Package
@vueuse/math
Last Changed
8 months ago

Reactively clamp a value between two other values.

Demo

min: max: value:0

Usage

ts
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:

ts
import { useClamp } from '@vueuse/math'

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

Type Declarations

typescript
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

SourceDemoDocs

Contributors

Anthony Fu
ClemDee

Changelog

v10.0.0-beta.5 on 4/13/2023
cb644 - refactor!: remove isFunction and isString utils
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v9.13.0 on 2/18/2023
08a07 - feat: composable computed usage improvements (#2696)
v8.9.2 on 7/12/2022
27125 - feat(math)!: move useClamp to @vueuse/math (#1810)
v8.9.1 on 7/8/2022
a9ccc - feat(all): use MaybeComputedRef (#1768)

Released under the MIT License.