1---
2category: '@Math'
3---
4 
5# useClamp
6 
7Reactively clamp a value between two other values.
8 
9## Usage
10 
11```ts
12import { useClamp } from '@vueuse/math'
13 
14const min = shallowRef(0)
15const max = shallowRef(10)
16const value = useClamp(0, min, max)
17```
18 
19### Writable Ref
20 
21When you pass a mutable `ref`, the returned value is a **writable computed** that clamps values when setting:
22 
23```ts
24import { useClamp } from '@vueuse/math'
25 
26const number = shallowRef(0)
27const clamped = useClamp(number, 0, 10)
28 
29clamped.value = 15 // clamped.value will be 10
30clamped.value = -5 // clamped.value will be 0
31```
32 
33### Read-only Mode
34 
35When you pass a getter function or readonly ref, the returned value is a read-only computed:
36 
37```ts
38import { useClamp } from '@vueuse/math'
39 
40const value = ref(5)
41const clamped = useClamp(() => value.value * 2, 0, 10)
42 
43// clamped.value is computed from the getter
44```
45 
46### Reactive Bounds
47 
48All arguments (value, min, max) can be reactive:
49 
50```ts
51import { useClamp } from '@vueuse/math'
52 
53const value = shallowRef(5)
54const min = shallowRef(0)
55const max = shallowRef(10)
56 
57const clamped = useClamp(value, min, max)
58 
59max.value = 3 // clamped.value automatically becomes 3
60```
61 
62## Type Declarations
63 
64```ts
65/**
66 * Reactively clamp a value between two other values.
67 *
68 * @see https://vueuse.org/useClamp
69 * @param value number
70 * @param min
71 * @param max
72 *
73 * @__NO_SIDE_EFFECTS__
74 */
75export declare function useClamp(
76  value: ReadonlyRefOrGetter<number>,
77  min: MaybeRefOrGetter<number>,
78  max: MaybeRefOrGetter<number>,
79): ComputedRef<number>
80export declare function useClamp(
81  value: MaybeRefOrGetter<number>,
82  min: MaybeRefOrGetter<number>,
83  max: MaybeRefOrGetter<number>,
84): Ref<number>
85```
86