Premium Widgets

Custom Slider

Custom Slider

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

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).

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

width / height

Tipo: text

Tamaño de todo el contenedor del slider.

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).

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.

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.

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>

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 <a href="/documentation/custom-slideshow"><code>arcCustomSlideshow</code></a> — a pesar del nombre similar, es un widget completamente distinto.