Step slider

Availability of functionality depends on the license and may not be available in all deployments.

Step slider component.

✅ 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).

❌ When not to use:

• When you want to retain the ability to set intermediate values between steps. Use: Slider / Plus/minus.
• When you want to retain the ability to adjust the value entered in the text field by a given step. Use: Plus/minus.

Component properties

Eximee Designer properties	Attribute name in the Source	Description
Slider initial value (section Basic properties)	startValue	Slider initial value (empty by default). Availability of this functionality depends on the license and may not be available in all deployments.
Step by which the value on the slider can be set (section Basic properties)	step	Step by which the value on the slider can be set (default value 100).
Minimum displayed slider value (section Basic properties)	minValue	Minimum slider value (default value 0).
Maximum displayed slider value (section Basic properties)	maxValue	Maximum slider value (default value 1000).
Graphical representation of the field (section Styling)	presentation	Graphical representation of the component (for selecting the value STANDARD - default and TILES). The value STANDARD defines the standard appearance of the component, TILES 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.
Predicted slider value on hover over the axis (section Styling)	showPredictionTooltip	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.
Tooltip presentation of the value indicated by the slider (section Styling)	showTooltip	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.
Text input suffix (section Other)	textInputSuffix	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.
Message for exceeding the maximum value (section Other)	minValueSuggest	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.
Message for exceeding the minimum value (section Other)	maxValueSuggest	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.

More information about component properties: Common component properties

Figure 1. Example appearance of the component on the application

Figure 2. Component with TILES presentation

Feeding the component with a script

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

1

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:

demoStepSliderScript

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)
    }];
}

2

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:

demoStepSliderListScript

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;
}

Demo request: demoStepSlider

♿WCAG: Good WCAG practices for low-code dev