Slider

The availability of features depends on the license and may not be available in all deployments.

A component allowing selection of numeric values using a slider.

Component properties

Eximee Designer property	Attribute name in Source	Description
Step by which the slider value can be set (section Basic properties)	step	Step of the value, i.e., the increment by which the slider value can be set (default value 100).
Initial value of the slider (section Basic properties)	startValue	Initial value of the slider (default empty). May be populated from a service.
Minimum displayed value of the slider (section Basic properties)		Minimum slider value (default value 0). May be populated from a service.
Maximum displayed value of the slider (section Basic properties)		Maximum slider value (default value 1000). May be populated from a service.
Minimum possible value (section Basic properties)		Minimum beyond which a value cannot be selected (default value 0). May be populated from a service.
Maximum possible value (section Basic properties)		Maximum beyond which a value cannot be selected (default value 1000). May be populated from a service.
Suggested value (section Basic properties)	suggestedValue	Suggested value (e.g., for a renewable limit the limit amount suggested by the bank). May be populated from a service. Feature availability depends on the license and may not be available in all deployments.
Suffix for the minimum and maximum value labels of the slider (section Other)	legendSuffix	A string "appended" to the minimum and maximum label of the slider. May 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 predicted 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.
Presentation in the tooltip of the value indicated by the slider (section Other)	showTooltip	Displaying the value indicated by the slider (default value "true"). Feature availability depends on the license and may not be available in all deployments.
Formatter for the value displayed in the text field	textInputFormatter	Formatter for the value displayed in the slider's text field. Feature availability depends on the license and may not be available in all deployments.
Suffix of the text field	textInputSuffix	A string "appended" at the end of the slider's text field. May 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. Functionality 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. Feature availability 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. Feature availability 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, minBlockValue and maxBlockValue are not respected. Feature availability depends on the license and may not be available in all deployments.

IMPORTANT — by default on the Slider maxValue and maxBlockValue should match, unless they are intentionally different (in which case the Slider value will be constrained to min (maxBlockValue, maxValue), so the upper bound will be the smaller of these values). Similarly for minValue and minBlockValue.

In the Slider component (in properties) there is no possibility to set the start/min/max values 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 pointing 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 point to that text field in the Data source from another field Slider.

Slider with example properties

Illustration 1. Example appearance of the component on the form

Specific appearance of the Slider

The availability of features depends on the license and may not be available in all deployments.

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

Illustration 2. Example appearance of the Slider with a text field

Illustration 3. Example appearance of the Slider with parameters provided in text fields

Information about the component state

Information about the current value of a given component property, which can then be used in the form e.g. to feed another field with the value of this property, can be obtained using the construction COMPONENT_ID$PROPERTY_NAME

For the slider you can retrieve the following property:

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

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

Example validator for the Slider

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

When attaching the validator below, use as a parameter insuranceComponentId enter the id of the component referring to the 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 mentioned components are not embedded directly on the form, provide the full embedding path, i.e., the id of the composite component that contains these components and each parent composite component.

Example 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 amount with insurance");
        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 value of the insurance");
        this.fields.put(INSURANCE_COMPONENT_ID, "Identifier of the insurance component");
        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 decrease 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: WCAG best practices for low-code dev