# Number

> The more-info view of a number entity of a device, a slider or a number field in the state row.

Source: https://contributors.home-assistant.io/design/more-info/number/

Live demo of `ha-demo-more-info`, connected to a demo Home Assistant.

```html
<ha-demo-more-info entity="number.living_room_speaker_bass"></ha-demo-more-info>
```

## What it shows

Number entities are the settings of a device that take a number, like the bass of a speaker or the sensitivity of a motion sensor. Like the [input number](https://contributors.home-assistant.io/design/more-info/input-number/) helper, they don't have the newer more-info design. The control lives in the state row at the top of the dialog: the icon and name on the left, the control on the right.

The integration picks the mode of the number:

- **Slider**: a [slider](https://contributors.home-assistant.io/design/components/slider/), with the value next to it. The bass of the living room speaker above goes from -10 to 10, as a slider.
- **Box**: a number [text input](https://contributors.home-assistant.io/design/components/input/), with the unit at the end.
- **Auto**: a slider when the range has a limited number of steps, and a field when it has too many to pick from with a slider.

Below the state row, the dialog shows the history of the entity and its activity. The demo shows only the state row.

## Design notes

- The slider and the field use the minimum, maximum, and step the device reports.
- The new value is sent when you let go of the slider, or when you confirm the field.
- When the entity is unavailable, the slider and the field are disabled.

## In code

The state row is `state-card-number` in [`src/state-summary/state-card-number.ts`](https://github.com/home-assistant/frontend/blob/dev/src/state-summary/state-card-number.ts). Whether it shows a slider is decided by `showNumberSlider` in [`src/data/number.ts`](https://github.com/home-assistant/frontend/blob/dev/src/data/number.ts). There is no `more-info-number`: the domain is in `DOMAINS_HIDE_DEFAULT_MORE_INFO` in [`src/dialogs/more-info/const.ts`](https://github.com/home-assistant/frontend/blob/dev/src/dialogs/more-info/const.ts).

Source: [`state-card-number.ts`](https://github.com/home-assistant/frontend/blob/dev/src/state-summary/state-card-number.ts)