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

![](/files/e18cb548eab64290fd49398e23fc6e71a6fcbfb0)

✅ **When to use:**

* When only specific values are allowed (e.g., number of installments: 12, 24, 36).
* When you want the ability to visually present values in the form of tiles with permitted values (The functionality may not be available in all implementations).

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

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

## 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 the feature depends on the license and may not be available in all implementations.</td></tr><tr><td><strong>The step by which the slider value can be set</strong> (section <strong>Basic properties</strong>)</td><td>step</td><td>The step by which the slider value 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 (for selecting a value <strong>STANDARD</strong> - default and <strong>TILES</strong>). The value <strong>STANDARD</strong> defines the standard appearance of the component, <strong>TILES</strong> is a presentation of the component in the form of tiles with the value entered in the middle. Availability of the feature depends on the license and may not be available in all implementations.</td></tr><tr><td><strong>Predicted slider value on hover over the axis</strong> (section <strong>Styling</strong>)</td><td>showPredictionTooltip</td><td>Display of the predicted slider value when hovering over the slider axis (checked by default). Availability of the feature depends on the license and may not be available in all implementations.</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 of the value indicated by the slider (checked by default). Availability of the feature depends on the license and may not be available in all implementations.</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 the feature depends on the license and may not be available in all implementations.</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 has been exceeded. Availability of the feature depends on the license and may not be available in all implementations.</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 has been exceeded. Availability of the feature depends on the license and may not be available in all implementations.</td></tr></tbody></table>

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

![Illustration 1. Example appearance of the component on the application](/files/2af07d7adcaa2afeb9cce604fd6df707f6571303)

![Figure 2. Component with TILES presentation](/files/64804767457b8180a280083528fd137c24e03335)

## Feeding the component with a script

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

{% stepper %}
{% step %}

#### Feeding with min and max values

The feeding 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 feed **startValue** - the initial value of the component.

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

Example implementation of a script feeding 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 %}

#### Feeding with a list of values

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

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

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

Example implementation of a script feeding 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" %}
Demo case: demoStepSlider
{% endhint %}

{% hint style="info" %}
♿WCAG: [WCAG best practices for low-code dev](/documentation/documentation-en/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/documentation/documentation-en/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.