---
title: "Custom Slider"
slug: "custom-slider"
category: "Widgets"
reactComponent: "ArcWidgetSlider"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "slider.tsx"
locale: "es"
hosts: "ninox"
---

# Custom Slider

## AI Defaults (read first)

- **Function name**: `arcCustomSlider`.
- **Purpose**: Ein Wertregler (0–100 oder eigener Bereich) zum Ziehen per Maus/Touch – **kein** Bild-/Content-Slideshow-Widget. Für Bildergalerien: [`arcCustomSlideshow`](/documentation/custom-slideshow).
- **recordId + fieldId**: Nur nötig, wenn der Wert automatisch gespeichert werden soll. Ohne beide Felder wird beim Loslassen **nicht** persistiert.
- **Persistence**: Speichern läuft über **Action Performer** (`type: "update"` mit `recordId` / `field` / `value`). React: `onAction` — kein globales `database`.
- **value / min / max / step**: Default `0` / `0` / `100` / `1`.
- **valueDisplay.show**: Default `true` (Zahlenwert wird angezeigt). `false` blendet die Zahl aus.
- **statusDisplay**: Optionales Array für Icons + dynamische Einfärbung je Schwellenwert (z. B. 🔥 ab 80). Leeres Array oder weglassen = keine Icons.

# Custom Slider

Con `arcCustomSlider` construyes un regulador de valores interactivo en Ninox — basado en JavaScript puro, no en el input range nativo de HTML. El usuario arrastra el botón del regulador (thumb) con el ratón o el dedo, o hace clic directamente en la barra (track) para fijar el valor.

**Esto puedes controlar:**

- Rango de valores (`min`, `max`, `step`)
- Apariencia del track, del fill (área rellenada) y del thumb
- Visualización del valor numérico actual (mostrar/ocultar)
- Iconos dinámicos + coloración según umbral (p. ej. semáforo de estado)
- Guardado automático en un campo de Ninox al soltar

## Código de aplicación

```javascript
arcCustomSlider({
    value: current.Fortschritt,
    min: 0,
    max: 100,
    step: 1,
    width: "300px",
    height: "50px",
    recordId: current.Nr,
    fieldId: fieldId("Aufgaben", "Fortschritt"),
    track: {
        height: "6px",
        borderRadius: "3px",
        backgroundColor: "#E9ECF4"
    },
    fill: {
        backgroundColor: "#4970ff"
    },
    thumb: {
        width: "20px",
        height: "20px",
        backgroundColor: "#ffffff",
        borderColor: "#ccc",
        borderWidth: "2px",
        borderRadius: "50%"
    },
    valueDisplay: {
        show: true,
        color: "#515971",
        fontSize: "14px"
    },
    statusDisplay: [{
            label: "🔥",
            value: 80,
            color: "#ff4444"
        }, {
            label: "✓",
            value: 50,
            color: "#4CAF50"
        }, {
            label: "⚠",
            value: 20,
            color: "#ff9800"
        }]
})
```

## Parámetros

### value / min / max / step

**Tipo:** `number`
**Default:** `0` / `0` / `100` / `1`

Valor actual, rango de valores y tamaño de paso. `value` se establece una vez al cargar — la vinculación con el campo de Ninox la gestionas tú mismo (p. ej. `value: current.Fortschritt`).

```javascript
value: 50,
min: 0,
max: 100,
step: 1,
```

### width / height

**Tipo:** `text`

Tamaño de todo el contenedor del slider.

```javascript
width: "300px", // oder "100%"
height: "50px",
```

### recordId / fieldId

**Tipo:** `text`
**Opcional, pero ambos son necesarios para el guardado automático**

Al soltar el regulador (`mouseup`/`touchend`) se dispara — **solo si ambos están establecidos** — una acción de Action Performer `{ type: "update", recordId, field: fieldId, value }` (Ninox lo mapea a `database.update`; en React mediante `onAction`).

```javascript
recordId: current.Nr,
fieldId: fieldId("Aufgaben", "Fortschritt"),
```

💡 **Nota:** Si falta uno de los dos campos, **no** se persiste — pero el valor **no** se pierde en la interfaz.

### Bloque: track{}

**Tipo:** `object`
**Opcional**

Estilo de la barra del regulador (fondo de toda la pista).

<figure><table><tbody><tr><th>Feld

</th><th>Beschreibung

</th></tr><tr><td>`height`

</td><td>Altura del track, p. ej. `"6px"`

</td></tr><tr><td>`backgroundColor`

</td><td>Color del track, p. ej. `"#E9ECF4"`

</td></tr><tr><td>`borderRadius`

</td><td>Border-radius del track, p. ej. `"3px"`

</td></tr></tbody></table></figure>

### Bloque: fill{}

**Tipo:** `object`
**Opcional**

Estilo del área **rellenada** entre el inicio y el valor actual.

```javascript
fill: {
    backgroundColor: "#4970ff"
}
```

### Bloque: thumb{}

**Tipo:** `object`
**Opcional**

Estilo del botón del regulador.

<figure><table><tbody><tr><th>Feld

</th><th>Beschreibung

</th></tr><tr><td>`width` / `height`

</td><td>Tamaño del botón, p. ej. `"20px"`

</td></tr><tr><td>`backgroundColor`

</td><td>Color de relleno del botón

</td></tr><tr><td>`borderColor` / `borderWidth` / `borderRadius`

</td><td>Borde del botón, p. ej. `borderRadius: "50%"` para redondo

</td></tr></tbody></table></figure>

### Bloque: valueDisplay{}

**Tipo:** `object`
**Default:** `{ show: true }`

Controla la visualización del valor numérico actual junto al/bajo el regulador.

```javascript
valueDisplay: {
    show: true,       // false blendet die Zahl komplett aus
    color: "#515971",
    fontSize: "14px"
}
```

### statusDisplay

**Tipo:** `array of objects`
**Opcional**

Muestra un icono/símbolo en cuanto el valor actual alcanza un umbral — además cada estado puede recolorear track/fill/thumb. Las entradas se ordenan internamente de forma descendente por `value`; gana el **umbral más alto alcanzado**.

<figure><table><tbody><tr><th>Feld

</th><th>Beschreibung

</th></tr><tr><td>`label`

</td><td>Icono o texto, p. ej. `"🔥"`, `"✓"`, `"⚠"`, `"✕"`

</td></tr><tr><td>`value`

</td><td>Umbral — a partir de este valor se activa el estado

</td></tr><tr><td>`color`

</td><td>Color del texto del icono

</td></tr><tr><td>`track` / `fill` / `thumb`

</td><td>Opcional: misma estructura que arriba, sobrescribe el estilo estándar para este estado (con `!important`)

</td></tr></tbody></table></figure>

```javascript
statusDisplay: [{
    label: "🔥",
    value: 80,
    color: "#ff4444",
    fill: { backgroundColor: "#ff4444" }
}, {
    label: "✓",
    value: 50,
    color: "#4CAF50"
}]
```

💡 **Consejo:** Array vacío (`statusDisplay: []`) u omitirlo = sin iconos, solo el regulador puro con el valor numérico.

## Widget relacionado

Para galerías de imágenes, carruseles de contenido o diapositivas de texto de varias páginas con gesto de swipe usa en su lugar [`arcCustomSlideshow`](/documentation/custom-slideshow) — a pesar del nombre similar, es un widget completamente distinto.