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

![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/EzmxOcXsSNp3S0IqAv86/15s_files/image2025-5-16_10-56-37.png)

✅ **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](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/slider) / [Plus minus](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/plus-minus).
* Gdy chcesz zachować możliwość regulacji o dany krok wartości wprowadzanej w polu tekstowym. **Stosuj**: [Plus minus](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/plus-minus).

## 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](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

![Ilustracja 1. Przykładowy wygląd komponentu na wniosku](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/Xmw6F9roWRWJTNIR8By3/15s_files/image2025-5-16_10-57-31.png)

![Ilustracja 2. Komponent z prezentacją TILES](https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-61013c98538ae884e626c53d7d525f6effd3fccd%2Fslider2.png?alt=media)

## 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](https://docs.eximee.com/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}