# Stepper (/docs/products/dash-dots/reference/components/stepper)

For a wide range, use a `Slider`.

**Children:** Nothing

## Example

![The Stepper component](/assets/images/dash-dots/components/stepper.webp)

```xml title="view.dml"
<Stepper label="Quantity" value="{{ quantity }}" min="1" max="10" onChange="setQuantity" />
```

```ts title="controller.ts"
export default definePage({
  initialState: { quantity: 2 },
  mutations: {
    setQuantity: (_state, event: ValueEvent<number>) => ({ quantity: event.detail.value }),
  },
});
```

## Props

| Prop       | Type      | What it is                                          |
| ---------- | --------- | --------------------------------------------------- |
| `value`    | `number`  |                                                     |
| `min`      | `number`  |                                                     |
| `max`      | `number`  |                                                     |
| `step`     | `number`  | Default: `1`.                                       |
| `label`    | `string`  |                                                     |
| `hint`     | `string`  | Help shown under the field, which `error` replaces. |
| `disabled` | `boolean` | Dims it, and the person can't use it.               |

## Events

| Event      | Sends                   | Notes                       |
| ---------- | ----------------------- | --------------------------- |
| `onChange` | `{ value }` in `detail` | The new value, as a number. |