### Replace integer fields that have min and max validation with a slider, stepper, or step buttons.

(Image content)

[

**This is a Community Plugin!** Learn how create your own plugin, or copy and remix existing ones in our documentation

](https://www.datocms.com/docs/plugin-sdk/introduction.md)

## Integer picker

A DatoCMS field editor for integer fields that already have a minimum and a maximum. Editors pick one appearance per field: a slider, a stepper, or a short row of steps.

## What it looks like

(Image content)

## Requirements

-   Field type is **Integer**
-   The field’s Validations tab has both a **minimum** and a **maximum**, and min is less than max

If either bound is missing, the editor shows a short notice instead of a control.

## Appearances

Set **Appearance** in the field’s presentation settings after you assign Integer picker.

| Appearance | Best for | Behavior |
| --- | --- | --- |
| **Slider** | Wide ranges | Drag the knob. The current value sits above it and tints while you drag. |
| **Stepper** | Nudging one at a time | `−` and `+` move the integer by one. `+` writes the minimum when the field is empty. |
| **Steps** | Short, enumerable ranges | One button per integer from min to max. |

Steps only renders when the inclusive range is **12 values or fewer**. A range of 1–8 is fine. A range of 0–100 is not; tighten the bounds or switch to Slider or Stepper.

## Install

### From npm

1.  In the DatoCMS project, open **Settings → Plugins** and add `datocms-plugin-integer-picker`.
2.  On an integer field, open **Presentation** and set the editor to **Integer picker**.
3.  Choose **Slider**, **Stepper**, or **Steps**.

### Local development

```sh
pnpm installpnpm --filter datocms-plugin-integer-picker dev
```

Then add a **private plugin** whose entry point is `http://localhost:5173/`. Use Chrome or Firefox; Safari does not handle localhost plugin iframes well.

To keep a working Marketplace install untouched, duplicate it and point only the copy at localhost.

## Empty and disabled fields

An empty field stays empty until the editor moves the slider, presses `+`, or picks a step. Opening a record does not write a default.

When the field is disabled (permissions, workflow, or a locked record), the control does not accept input.

## Publish

```sh
cd plugins/integer-pickerpnpm publish
```

The package publishes `dist/` plus the marketplace images in `docs/`. Bump `version` before each release. Existing DatoCMS installs do not update themselves; use **Switch to a different version**.