> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/step-slider.md).

# Step slider

{% hint style="info" %}
Availability of 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 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 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 initial value</strong> (section <strong>Basic properties</strong>)</td><td>startValue</td><td>Slider initial 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 (for selecting the 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 tile-based presentation of the component with the value entered in the center. 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 (checked 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 (checked by default). Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Text input 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>Message for exceeding the maximum value</strong> (section <strong>Other</strong>)</td><td>minValueSuggest</td><td>Text displayed under the Step slider text field after exceeding the minimum value. Availability of this functionality depends on the license and may not be available in all deployments.</td></tr><tr><td><strong>Message for exceeding the minimum value</strong> (section <strong>Other</strong>)</td><td>maxValueSuggest</td><td>Text displayed under the Step slider text field after exceeding the maximum value. 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](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

![Figure 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 %}

#### Supplying 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 supply **startValue** - the initial value of the component.

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

Example implementation of the script supplying the 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 %}

#### Supplying 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 component domain, 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 of the values should have a visible label, e.g.: \[true, false, true, false, true]

On the step slider supplied in this way, labels will be displayed for the values 1, 3, and 5.

Example implementation of the script supplying the 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 request: demoStepSlider
{% endhint %}

{% hint style="info" %}
♿WCAG: [Good WCAG 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` 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>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.