# Slider (/docs/products/dash-dots/reference/components/slider)

For a small count the person changes one at a time, use a `Stepper`.

**Children:** Nothing

## Example

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

```xml title="view.dml"
<Slider label="Volume" value="{{ volume }}" min="0" max="100" step="10" showValue onChange="setVolume" />
```

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

## Props

| Prop        | Type      | What it is                                          |
| ----------- | --------- | --------------------------------------------------- |
| `value`     | `number`  |                                                     |
| `min`       | `number`  | Default: `0`.                                       |
| `max`       | `number`  | Default: `100`.                                     |
| `step`      | `number`  | Default: `1`.                                       |
| `showValue` | `boolean` |                                                     |
| `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. |