Slider

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

A component that allows selecting numeric values using a slider.

✅ When to use:

• When you want to allow entering any exact amount in the text field (e.g. loan amount of 5200 PLN), regardless of the slider step (e.g. 500 PLN).
• When you need to visually limit the selection range without changing the visible scale – the properties minBlockValue and maxBlockValue allow dynamic slider blocking (e.g. based on the client's creditworthiness, the form limits the range to 5000 PLN, even though the maximum amount offered by the bank is 10,000 PLN).

❌ When not to use:

• When the process does not allow intermediate values to be used (e.g. the application allows only specific values, such as the number of installments). Use: Step Slider.

Component properties

Eximee Designer property	Attribute name in the Source	Description
Step by which the value on the slider can be set (section Basic properties)	step	Value increment, i.e. the step by which the value on the slider can be set (default value 100).
Slider initial value (section Basic properties)	startValue	Initial value of the slider (empty by default). It can be populated from a service.
Minimum displayed slider value (section Basic properties)	minValue	Minimum slider value (default value 0). It can be populated from a service.
Maximum displayed slider value (section Basic properties)	maxValue	Maximum slider value (default value 1000). It can be populated from a service.
Minimum possible value (section Basic properties)	minBlockValue	Minimum beyond which a value cannot be selected (default value 0). It can be populated from a service.
Maximum possible value (section Basic properties)	maxBlockValue	Maximum beyond which a value cannot be selected (default value 1000). It can be populated from a service.
Suggested value (section Basic properties)	suggestedValue	Suggested value (e.g. in the case of a revolving limit, the amount of the limit suggested by the bank). It can be populated from a service. Feature availability depends on the license and may not be available in all deployments.
Suffix of the minimum and maximum slider value label (section Other)	legendSuffix	Value "appended" to the label of the minimum and maximum slider value. It can be populated from a service. Feature availability depends on the license and may not be available in all deployments.
Predicted slider value on hover over the axis (section Other)	showPredictionTooltip	Showing the projected slider value when hovering over the slider axis (default value "true"). Feature availability depends on the license and may not be available in all deployments.
Tooltip presentation of the value indicated by the slider (section Other)	showTooltip	Showing the value indicated by the slider (default value "true"). Feature availability depends on the license and may not be available in all deployments.
Formatter of the value displayed in the text field	textInputFormatter	Formatter of the value displayed in the slider's text field. Feature availability depends on the license and may not be available in all deployments.
Text input suffix	textInputSuffix	Value "appended" to the end of the slider's text field. It can be populated from a service. Feature availability depends on the license and may not be available in all deployments.
Description displayed after clicking the text field	descriptionPopupText	Description displayed after clicking the slider's text field. Feature available in mobile and native channels.
Message for exceeding the minimum value	minValueSuggest	Text displayed under the slider's text field after exceeding the minimum value. It should be assigned in the tab Translations to the key GesSingleSlider1.minValueSuggest. The availability of this functionality depends on the license and may not be available in all deployments.
Message for exceeding the maximum value	maxValueSuggest	Text displayed under the slider's text field after exceeding the maximum value. It should be assigned in the tab Translations to the key GesSingleSlider1.maxValueSuggest. The availability of this functionality depends on the license and may not be available in all deployments.
Synchronization of the slider state and the value entered in the text field	separatedSliderValue	Controls synchronization of the slider state and the value entered in the input. When separatedSliderValue=true, the minBlockValue and maxBlockValue values are not respected. Feature availability depends on the license and may not be available in all deployments.

IMPORTANT — for the Slider, by default the maxValue and maxBlockValue values should match, unless they are intentionally meant to differ (then the Slider value will be limited to min (maxBlockValue, maxValue), so the upper limit will be the smaller of these values). Similarly for the minValue and minBlockValue values.

In the Slider component (in the properties), it is not possible to set the initial/minimum/maximum value to a type other than integer.

More information about component properties: Common component properties

Copying the slider value to the Text Field and vice versa

If the Slider value is to be copied to the Text Field component, that component must listen to the Slider, and the value will be copied either by indicating the slider in the Data source from another field text component, or a special service will be set for the Text Field (e.g. EchoService).

Also, the Slider value can be set based on the number entered into the Text Field component. To do this, the Slider should listen to the TextField and indicate this text field in the Slider's property Data source from another field Slider.

Slider with sample properties

Figure 1. Example appearance of the component on the application

Specific appearance of the Slider

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

In some themes the text field is already integrated with the slider.

Figure 2. Sample appearance of the Slider with a text field

Figure 3. Sample appearance of the Slider with parameters entered in text fields

Component state information

Information about the current value of a given component property, which can then be used on the form, e.g. to populate another field with the value of that property, can be obtained using the construct COMPONENT_ID$PROPERTY_NAME

For the slider, the following property can be retrieved:

Key	Description
sliderValue	Value marked on the slider. If separatedSliderValue is set to true, it may differ from the component value.

Example: populating Data source from another field via GesSlider1$sliderValue

Example validator for the Slider

The validator displays a hint for the Slider in specific situations.

When connecting the validator below, you should use the parameter insuranceComponentId enter the id of the component related to insurance (e.g. the checkbox controlling enabling/disabling insurance) and as sliderId provide the id of the Slider whose amounts we want to control. If the listed components are not embedded directly in the application, then provide the full embedding path, i.e. the id of the composite component containing these components and every parent composite component.

Sample validator code

DevDemoSliderHintValidator.java

package pl.slider.demo.hint;

import lombok.extern.slf4j.Slf4j;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Service;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import pl.consdata.eximee.validation.api.exceptions.ValidatorException;
import pl.consdata.eximee.validation.api.model.*;
import pl.consdata.eximee.validation.api.validator.AbstractExtendedValidator;

import java.math.BigDecimal;

import static java.util.Arrays.asList;
import static java.util.Collections.singletonList;
import static org.apache.commons.lang3.StringUtils.*;

@Slf4j
@Component
@Service(AbstractExtendedValidator.class)
public class DevDemoSliderHintValidator extends AbstractExtendedValidator {
    static final String GREATER_THAN_MAX = "DevDemoSliderHintValidator.greaterThanMax";
    static final String LESS_THAN_MIN = "DevDemoSliderHintValidator.lessThanMin";
    static final String LESS_THAN_MIN_BUTTON_LABEL = "DevDemoSliderHintValidator.lessThanMin.buttonLabel";
    static final String GREATER_THAN_MAX_BUTTON_LABEL = "DevDemoSliderHintValidator.greaterThanMax.buttonLabel";
    static final String GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT = "DevDemoSliderHintValidator.greaterThanInsuranceTreshold.changeAmount";
    static final String GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE = "DevDemoSliderHintValidator.greaterThanInsuranceTreshold.withoutInsurance";
    static final String INSURANCE_AMOUNT_THRESHOLD = "insuranceAmountThreshold";
    static final String MAX_AMOUNT = "maxAmount";
    static final String MIN_AMOUNT = "minAmount";
    static final String SLIDER_INPUT = "sliderInput";
    static final String INSURANCE_CURRENT_VALUE = "insuranceCurrentValue";
    static final String INSURANCE_COMPONENT_ID = "insuranceComponentId";
    static final String INSURANCE_UNCHECKED_VALUE = "insuranceUncheckedValue";
    static final String GREATER_THAN_INSURANCE_TRESHOLD = "DevDemoSliderHintValidator.greaterThanInsuranceTreshold";
    static final String SLIDER_ID = "sliderId";

    private static final Logger LOGGER = LoggerFactory.getLogger(DevDemoSliderHintValidator.class);

    public DevDemoSliderHintValidator() {
        this.name = "DevDemoSliderHintValidator";
        this.version = "1.0";
        this.description = "Validator returning a validation message in the form of a hint for the slider.";
        this.fields.put(SLIDER_INPUT, "Value from the slider");
        this.fields.put(SLIDER_ID, "Identifier of the validated slider");
        this.fields.put(INSURANCE_AMOUNT_THRESHOLD, "Threshold for the insured amount");
        this.fields.put(MAX_AMOUNT, "Maximum value in the slider");
        this.fields.put(MIN_AMOUNT, "Minimum value in the slider");
        this.fields.put(INSURANCE_CURRENT_VALUE, "Current insurance value");
        this.fields.put(INSURANCE_COMPONENT_ID, "Insurance component identifier");
        this.fields.put(INSURANCE_UNCHECKED_VALUE, "Value of unchecked insurance");

        this.possibleErrors.put(LESS_THAN_MIN, "The minimum loan amount is <strong>{0} PLN</strong>");
        this.possibleErrors.put(GREATER_THAN_MAX, "For a loan higher than <strong>{0} PLN</strong> net, we need to ask you a few additional questions.");
        this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD, "If you want a loan with insurance higher than <strong>{0} PLN</strong> net, visit any Bank branch.");
        this.possibleErrors.put(LESS_THAN_MIN_BUTTON_LABEL, "I understand >");
        this.possibleErrors.put(GREATER_THAN_MAX_BUTTON_LABEL, "Yes, I want to apply for {1} PLN");
        this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT, "I am reducing the amount");
        this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE, "Without insurance");
    }

    @Override
    public ValidatorOutput validate(ValidatorInput validatorInput) {
        LOGGER.info(">> Validator called with params: {}", validatorInput);
        ValidatorOutput result = new ValidatorOutput();

        if (isValueGreaterThanMax(validatorInput)) {
            result.setErrors(singletonList(valueGreaterThanMaxMessage(validatorInput)));
        } else if (isValueLessThanMin(validatorInput)) {
            result.setErrors(singletonList(valueLessThanMinMessage(validatorInput)));
        } else if (isValueGreaterThanInsuranceTresholdAndInsuranceIsChecked(validatorInput)) {
            result.setErrors(singletonList(valueGreaterThanInsuranceTresholdAndInsuranceIsCheckedMessage(validatorInput)));
        }

        LOGGER.info("<< Output: {}", result);
        return result;
    }

    private boolean isValueGreaterThanMax(final ValidatorInput input) {
        return asBigDecimal(input.getFirstValue(SLIDER_INPUT)).compareTo(asBigDecimal(input.getFirstValue(MAX_AMOUNT))) > 0;
    }

    private ValidationMessage valueGreaterThanMaxMessage(final ValidatorInput input) {
        final ValidationMessage message = new ValidationMessage(GREATER_THAN_MAX, asList(input.getFirstValue(MAX_AMOUNT), input.getFirstValue(SLIDER_INPUT)));
        message.setType(ValidationMessage.TYPE_HINT);
        message.setActions(singletonList(ValidationAction
                .builder()
                .actionData("https://www.xxxxxxx.pl")
                .actionType(ValidationActionType.REDIRECT)
                .actionName(GREATER_THAN_MAX)
                .content(GREATER_THAN_MAX_BUTTON_LABEL)
                .build()));
        return message;
    }

    private boolean isValueLessThanMin(final ValidatorInput input) {
        return asBigDecimal(input.getFirstValue(SLIDER_INPUT)).compareTo(asBigDecimal(input.getFirstValue(MIN_AMOUNT))) < 0;
    }

    private ValidationMessage valueLessThanMinMessage(final ValidatorInput input) {
        final ValidationMessage message = new ValidationMessage(LESS_THAN_MIN, singletonList(input.getFirstValue(MIN_AMOUNT)));
        message.setType(ValidationMessage.TYPE_HINT);
        message.setActions(singletonList(ValidationAction
                .builder()
                .actionData(input.getFirstValue(MIN_AMOUNT))
                .actionType(ValidationActionType.CHANGE_VALUE)
                .changeComponentId(input.getFirstValue(SLIDER_ID))
                .actionName(LESS_THAN_MIN)
                .content(LESS_THAN_MIN_BUTTON_LABEL)
                .build()));
        return message;
    }

    private boolean isValueGreaterThanInsuranceTresholdAndInsuranceIsChecked(final ValidatorInput input) {
        return !equalsIgnoreCase(input.getFirstValue(INSURANCE_CURRENT_VALUE), input.getFirstValue(INSURANCE_UNCHECKED_VALUE))
                && asBigDecimal(input.getFirstValue(SLIDER_INPUT)).compareTo(asBigDecimal(input.getFirstValue(INSURANCE_AMOUNT_THRESHOLD))) > 0;
    }

    private ValidationMessage valueGreaterThanInsuranceTresholdAndInsuranceIsCheckedMessage(final ValidatorInput input) {
        final ValidationMessage message = new ValidationMessage(GREATER_THAN_INSURANCE_TRESHOLD, singletonList(input.getFirstValue(INSURANCE_AMOUNT_THRESHOLD)));
        message.setType(ValidationMessage.TYPE_HINT);
        message.setActions(asList(ValidationAction
                .builder()
                .actionData(input.getFirstValue(INSURANCE_AMOUNT_THRESHOLD))
                .actionType(ValidationActionType.CHANGE_VALUE)
                .changeComponentId(input.getFirstValue(SLIDER_ID))
                .actionName(GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT)
                .content(GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT)
                .build(), ValidationAction
                .builder()
                .actionData(input.getFirstValue(INSURANCE_UNCHECKED_VALUE))
                .actionType(ValidationActionType.CHANGE_VALUE)
                .changeComponentId(input.getFirstValue(INSURANCE_COMPONENT_ID))
                .actionName(GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE)
                .content(GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE)
                .build()));
        return message;
    }

    private BigDecimal asBigDecimal(final String str) {
        final String digits = removePattern(str, "[^0-9-]");
        return isNotEmpty(digits) ? new BigDecimal(digits) : BigDecimal.ZERO;
    }
}

Demo application: demoSlider

Demo application in selected deployments: demoSliderValidationHint

♿WCAG: Good WCAG practices for low-code dev