# Step slider

{% hint style="info" %}
Availability of the functionality depends on the license and may not be available in all deployments.
{% endhint %}

Step slider component.

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

✅ **When to use:**

* When only specific values are allowed (e.g. number of installments: 12, 24, 36).
* When you want the option to visually present values as tiles with allowed values (This functionality may not be available in all deployments).

:x: **When not to use:**

* When you want to preserve the ability to set intermediate values between steps. **Use**: [Slider](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/slider) / [Plus minus](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/plus-minus).
* When you want to keep the ability to adjust the value entered in the text field by a given step. **Use**: [Plus minus](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/plus-minus).

## Component properties

<table><thead><tr><th>Eximee Designer properties</th><th width="208.800048828125">Attribute name in the Source</th><th>Description</th></tr></thead><tbody><tr><td><strong>Slider start value</strong> (section <strong>Basic properties</strong>)</td><td>startValue</td><td>Slider start value (empty by default). Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Step by which the value on the slider can be set</strong> (section <strong>Basic properties</strong>)</td><td>step</td><td>Step by which the value on the slider can be set (default value 100).</td></tr><tr><td><strong>Minimum displayed slider value</strong> (section <strong>Basic properties</strong>)</td><td>minValue</td><td>Minimum slider value (default value 0).</td></tr><tr><td><strong>Maximum displayed slider value</strong> (section <strong>Basic properties</strong>)</td><td>maxValue</td><td>Maximum slider value (default value 1000).</td></tr><tr><td><strong>Graphical representation of the field</strong> (section <strong>Styling</strong>)</td><td>presentation</td><td>Graphical representation of the component (available values <strong>STANDARD</strong> - default and <strong>TILES</strong>). The value <strong>STANDARD</strong> defines the standard appearance of the component, <strong>TILES</strong> is the component presented as tiles with the value entered in the middle. Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Predicted slider value on hover over the axis</strong> (section <strong>Styling</strong>)</td><td>showPredictionTooltip</td><td>Display the predicted slider value when hovering over the slider axis (selected by default). Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Tooltip presentation of the value indicated by the slider</strong> (section <strong>Styling</strong>)</td><td>showTooltip</td><td>Display the value indicated by the slider (selected by default). Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Text field suffix</strong> (section <strong>Other</strong>)</td><td>textInputSuffix</td><td>Value appended to the end of the slider text field. Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Maximum value exceeded message</strong> (section <strong>Other</strong>)</td><td>minValueSuggest</td><td>Text displayed below the Step slider text field after the minimum value is exceeded. Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Minimum value exceeded message</strong> (section <strong>Other</strong>)</td><td>maxValueSuggest</td><td>Text displayed below the Step slider text field after the maximum value is exceeded. Availability of this functionality depends on the license and may not be available in all deployments.</td></tr></tbody></table>

> More information about component properties: [Common component properties](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

![Figure 1. Example appearance of the component in the application](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/Xmw6F9roWRWJTNIR8By3/15s_files/image2025-5-16_10-57-31.png)

![Figure 2. Component with TILES presentation](https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-61013c98538ae884e626c53d7d525f6effd3fccd%2Fslider2.png?alt=media)

## Populating the component with a script

The step slider component can be populated by a script in one of two ways:

{% stepper %}
{% step %}

#### Populating with min and max values

The populating script should return data in the fields **minValue** and **maxValue**:

* **minValue** - minimum component value, e.g.: minValue=100
* **maxValue** - maximum component value, e.g.: maxValue=200

Optionally, you can also populate **startValue** - the initial value of the component.

Populating the step slider component with min and max values does not allow hiding value labels (all labels will be visible).

Example implementation of a populating script for fields **minValue**, **maxValue** and **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 %}

#### Populating with a list of values

The populating script should return data in the form of two lists in **valuesDomain** and **visibleValuesDomain**:

* **valuesDomain** - a list containing the sorted domain of the component, defining all numbers the slider can take as a value, e.g.: \[1, 2, 3, 4, 5]
* **visibleValuesDomain** - a list containing binary flags, defining which values should have a visible label, e.g.: \[true, false, true, false, true]

On a step slider populated this way, labels will be displayed for values: 1, 3 and 5.

Example implementation of a populating script for fields **valuesDomain** and **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" %}
Application demo: demoStepSlider
{% endhint %}

{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}