# Slider Card (/docs/espdash/v5/cards/slider)

> Let users select a numeric value within a range from the dashboard using dash::SliderCard.

Library: ESP-DASH v5.x.x

The slider card lets the user select a numeric value by dragging a handle along a range with a fixed step. Use it to control brightness, speed, set points or any other bounded setting.

![Slider card](https://docs.softt.io/img/v5/cards/light/slider.png)

## Constructor

```cpp
dash::SliderCard<T, Precision> card(dashboard, name, minValue, maxValue, step, unit);
```

<TypeTable
  type={{
    dashboard: { type: 'ESPDash&', description: 'Dashboard instance the card is added to.', required: true },
    name: { type: 'const char*', description: 'Card title.', required: true },
    minValue: { type: 'T', description: 'Lower bound of the range.', required: true },
    maxValue: { type: 'T', description: 'Upper bound of the range.', required: true },
    step: { type: 'T', description: 'Increment between selectable values.', default: '1' },
    unit: { type: 'const char*', description: 'Unit displayed next to the value.', default: '""' },
  }}
/>

Template parameters:

<TypeTable
  type={{
    T: { type: 'typename', description: 'Value type. Any integral or floating-point type.', default: 'int' },
    Precision: { type: 'uint8_t', description: 'Number of decimal places sent for `float` and `double` values.', default: '2' },
  }}
/>

```cpp
dash::SliderCard slider(dashboard, "Slider", 0, 255);                          // int, step 1
dash::SliderCard<int> volume(dashboard, "Volume", 0, 100, 1, "%");
dash::SliderCard<float, 2> voltage(dashboard, "Voltage", 0.0f, 1.0f, 0.01f, "V");
```

An overload without the `dashboard` argument creates the card without attaching it to a dashboard; attach it later with `dashboard.add(card)`.

### Percentage slider

`dash::PercentageSliderCard<T>` is a preconfigured slider with a range of 0 to 100, a step of 1 and the unit `"%"`. `T` defaults to `uint8_t`.

```cpp
dash::PercentageSliderCard brightness(dashboard, "Brightness"); // uint8_t, 0–100 %
```

It accepts only `dashboard` and `name` and provides the same callback and methods as `dash::SliderCard`.

## Callback

```cpp
void onChange(std::function<void(T value)> callback);
```

The callback fires when the user moves the slider on the dashboard. `value` is the selected value, of the card's type `T`.

The card does not update its own value when the callback fires. Call `setValue(value)` and then `dashboard.sendUpdates()` inside the callback to confirm the new value on the dashboard.

```cpp
dash::SliderCard<int> volume(dashboard, "Volume", 0, 100, 1, "%");

// in setup()
volume.onChange([](int value) {
  Serial.printf("Volume: %d\n", value);
  volume.setValue(value);
  dashboard.sendUpdates();
});
```

## Methods

### `setValue()`

```cpp
bool setValue(const T& value);
```

Sets the slider position. Values below `min()` or above `max()` are clamped to the nearest bound. Returns `true` if the stored value changed.

### `value()`

```cpp
const T& value() const;
```

Returns the current value. Call it only when `hasValue()` returns `true`.

### `hasValue()`

```cpp
bool hasValue() const;
```

Returns `true` if a value has been set.

### `setMin()`

```cpp
bool setMin(T minValue);
```

Sets the lower bound. If the current value is below the new bound, it is raised to the bound. Returns `true` if the bound changed.

### `setMax()`

```cpp
bool setMax(T maxValue);
```

Sets the upper bound. If the current value is above the new bound, it is lowered to the bound. Returns `true` if the bound changed.

### `setStep()`

```cpp
bool setStep(T step);
```

Sets the increment between selectable values. Returns `true` if the step changed.

### `min()`, `max()` and `step()`

```cpp
T min() const;
T max() const;
T step() const;
```

Return the current lower bound, upper bound and step.

### `setUnit()`

```cpp
bool setUnit(const char* unit);
```

Sets the unit displayed next to the value. Returns `true` if the unit changed.

### `unit()`

```cpp
const char* unit() const;
```

Returns the current unit.

## Example

```cpp title="main.cpp"
#include <Arduino.h>
#include <WiFi.h>              // ESP32; use the networking headers for your board
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <ESPDash.h>

AsyncWebServer server(80);
ESPDash dashboard(server);

dash::SliderCard<int> brightness(dashboard, "Brightness", 0, 255, 5);

void setup() {
  Serial.begin(115200);
  // ... connect to Wi-Fi

  brightness.onChange([](int value) {
    Serial.printf("Brightness: %d\n", value);
    // apply the value, for example with analogWrite()
    brightness.setValue(value);
    dashboard.sendUpdates();
  });

  brightness.setValue(128);
  server.begin();
}

void loop() {
  // ...
}
```

## Notes

- The card stores the `unit` pointer and does not copy the string. Pass a string literal or a buffer that outlives the card.
- For floating-point sliders, choose a `Precision` that can represent `step`, for example `Precision = 2` for a step of `0.01`.
- `dash::PercentageSliderCard` declares a `Precision` template parameter but does not pass it to `dash::SliderCard`; values are always sent with the default precision of 2.