# Step slider

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

Komponent suwaka krokowego.

![](/files/7a40e32617b94620f52994a4d6dc2de92fd95817)

✅ **Kiedy stosować:**

* Gdy dopuszczalne są wyłącznie konkretne wartości (np. liczba rat: 12, 24, 36).
* Gdy chcesz mieć możliwość wizualnego zaprezentowania wartości w formie tiles z dozwolonymi wartościami (Funkcjonalność może nie występować we wszystkich wdrożeniach).

:x: **Kiedy nie stosować:**

* Gdy chcesz zachować możliwość ustawienia wartości pośrednich między krokami. **Stosuj**: [Slider](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/slider.md) / [Plus minus](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/plus-minus.md).
* Gdy chcesz zachować możliwość regulacji o dany krok wartości wprowadzanej w polu tekstowym. **Stosuj**: [Plus minus](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/plus-minus.md).

## Właściwości komponentu

<table><thead><tr><th>Właściwości Eximee Designer</th><th width="208.800048828125">Nazwa atrybutu w Źródle</th><th>Opis</th></tr></thead><tbody><tr><td><strong>Wartość startowa suwaka</strong> (sekcja <strong>Podstawowe właściwości</strong>)</td><td>startValue</td><td>Wartość startowa suwaka (domyślnie pusta). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr><tr><td><strong>Krok, co jaki można ustawić wartość na suwaku</strong> (sekcja <strong>Podstawowe właściwości</strong>)</td><td>step</td><td>Krok, co jaki można ustawić wartość na suwaku (domyślnie wartość 100).</td></tr><tr><td><strong>Minimalna prezentowana wartość suwaka</strong> (sekcja <strong>Podstawowe właściwości</strong>)</td><td>minValue</td><td>Wartość minimalna suwaka (domyślnie wartość 0).</td></tr><tr><td><strong>Maksymalna prezentowana wartość suwaka</strong> (sekcja <strong>Podstawowe właściwości</strong>)</td><td>maxValue</td><td>Wartość maksymalna suwaka (domyślnie wartość 1000).</td></tr><tr><td><strong>Reprezentacja graficzna pola</strong> (sekcja <strong>Stylizacja</strong>)</td><td>presentation</td><td>Reprezentacja graficzna komponentu (do wyboru wartości <strong>STANDARD</strong> - domyślna i <strong>TILES</strong>). Wartość <strong>STANDARD</strong> określa standardowy wygląd komponentu, <strong>TILES</strong> jest prezentacją komponentu w postaci kafelków wpisaną w środku wartością. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr><tr><td><strong>Prognozowana wartość suwaka po najechaniu na oś</strong> (sekcja <strong>Stylizacja</strong>)</td><td>showPredictionTooltip</td><td>Wyświetlenie prognozowanej wartości suwaka po najechaniu na oś suwaka (domyślnie zaznaczona). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr><tr><td><strong>Prezentacja w dymku wartości wskazywanej przez suwak</strong> (sekcja <strong>Stylizacja</strong>)</td><td>showTooltip</td><td>Wyświetlenie wartości wskazywanej przez suwak (domyślnie zaznaczona). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr><tr><td><strong>Suffix pola tekstowego</strong> (sekcja <strong>Pozostałe</strong>)</td><td>textInputSuffix</td><td>Wartość "doklejana" na końcu pola tekstowego slidera. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr><tr><td><strong>Komunikat przekroczenia wartości maksymalnej</strong> (sekcja <strong>Pozostałe</strong>)</td><td>minValueSuggest</td><td>Tekst wyświetlany pod polem tekstowym Step slidera po przekroczeniu wartości minimalnej. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr><tr><td><strong>Komunikat przekroczenia wartości minimalnej</strong> (sekcja <strong>Pozostałe</strong>)</td><td>maxValueSuggest</td><td>Tekst wyświetlany pod polem tekstowym Step slidera po przekroczeniu wartości maksymalnej. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.</td></tr></tbody></table>

> Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

![Ilustracja 1. Przykładowy wygląd komponentu na wniosku](/files/7682626a07f09aa599c9a640c14754b78a3858cf)

![Ilustracja 2. Komponent z prezentacją TILES](/files/tSrDMoH7wQ2dDpJQzPCl)

## Zasilenie komponentu skryptem

Komponent suwaka krokowego może być zasilony przez skrypt na jeden z dwóch sposobów:

{% stepper %}
{% step %}

#### Zasilenie wartościami min i max

Skrypt zasilający powinnien zwracać dane w polach **minValue** i **maxValue**:

* **minValue** - wartość minimalna komponentu, np.: minValue=100
* **maxValue** - wartość maksymalna komponentu, np.: maxValue=200

Opcjonalnie można zasilić również **startValue** - wartość początkową komponentu.

Zasilenie komponentu suwaka krokowego wartościami min i max nie pozwala na ukrywanie etykiet wartości (wszystkie etykiety będą widoczne).

Przykładowa implementacja skryptu zasilającego pola **minValue**, **maxValue** oraz **startValue**:

{% code title="demoStepSliderScript" expandable="true" %}

```js
function callService(context){
    let cardType = context.getFirstParameter('cardType');
    const limitInit = context.getFirstParameter('limitInit');

    cardType = (cardType || "").toString().trim().toLowerCase();

    let initStr = (limitInit === null || typeof limitInit === "undefined") ? "0" : (limitInit + "");
    initStr = initStr.replace(",", ".");
    const initNum = Number(initStr);

    const sliderLimitMin = 0;
    let sliderLimitMax = "1000";

    if(cardType === "premium"){
        sliderLimitMax = "100000";
    } else if(cardType === "standard"){
        sliderLimitMax = "10000";
    } else {
        sliderLimitMax = "1000";
    }

    const initInRange = Math.min(Math.max(initNum, sliderLimitMin), Number(sliderLimitMax));

    return [{
        'sliderLimitMin': String(sliderLimitMin),
        'sliderLimitMax': String(sliderLimitMax),
        'initNum': String(initInRange)
    }];
}
```

{% endcode %}
{% endstep %}

{% step %}

#### Zasilenie listą wartości

Skrypt zasilający powinna zwracać dane w postaci dwóch list w **valuesDomain** i **visibleValuesDomain**:

* **valuesDomain** - lista zawierająca posortowaną dziedzinę komponentu, określająca wszystkie liczby, jakie suwak może przyjąć za wartość, np.: \[1, 2, 3, 4, 5]
* **visibleValuesDomain** - lista zawierająca flagi binarne, określająca, które z wartości powinny mieć widoczną etykietę, np.: \[true, false, true, false, true]

Na suwaku krokowym zasilonym w ten sposób zostaną zaprezentowane etykiety dla wartości: 1, 3 i 5.

Przykładowa implementacja skryptu zasilającego pola **valuesDomain** i **visibleValuesDomain:**

{% code title="demoStepSliderListScript" expandable="true" %}

```js
function callService(context){
    let cardType = context.getFirstParameter('cardType');
    const stepSize = context.getFirstParameter('stepSize', '100');

    cardType = (cardType || "").toString().trim().toLowerCase();

    const minValue = 0;
    let maxValue = 1000;

    if(cardType === "premium"){
    
        maxValue = 100000;
    }
    else if(cardType === "standard"){
        maxValue = 10000;
    }
    else {
        maxValue = 1000;
    }

    const stepParsed = parseInt(stepSize);
    const step = (isNaN(stepParsed) || stepParsed <= 0) ? 1 : stepParsed;
    const outputs = [];

    for(let i = minValue; i <= maxValue; i += step){
        outputs.push({
            'valuesDomain': String(i),
            'visibleValuesDomain': "true"
        });
    }

    return outputs;
}
```

{% endcode %}
{% endstep %}
{% endstepper %}

{% hint style="info" %}
Wniosek demo: demoStepSlider
{% endhint %}

{% hint style="info" %}
♿WCAG: [Dobre praktyki WCAG dla low-code dev](/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki.md)
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/step-slider.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.