Slider

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

Component properties

Eximee Designer property	Attribute name in the Source	Description
Step interval at which a value can be set on the slider (section Basic properties)	step	Step of the value, i.e. the increment by which the slider value can be set (default value 100).
Slider start value (section Basic properties)	startValue	Starting value of the slider (default empty). Can be fed from a service.
Slider minimum displayed value (section Basic properties)	minValue	Minimum value of the slider (default value 0). Can be fed from a service.
Slider maximum displayed value (section Basic properties)	maxValue	Maximum value of the slider (default value 1000). Can be fed from a service.
Minimum possible value (section Basic properties)	minBlockValue	Minimum beyond which a value cannot be selected (default value 0). Can be fed from a service.
Maximum possible value (section Basic properties)	maxBlockValue	Maximum beyond which a value cannot be selected (default value 1000). Can be fed from a service.
Suggested value (section Basic properties)	suggestedValue	Suggested value (e.g. in the case of a renewable limit the amount suggested by the bank). Can be fed from a service. Feature availability depends on the license and may not be available in all deployments.
Suffix for the minimum and maximum slider label (section Other)	legendSuffix	Value "appended" to the minimum and maximum slider labels. Can be fed from a service. Feature availability depends on the license and may not be available in all deployments.
Predicted slider value on axis hover (section Other)	showPredictionTooltip	Showing the predicted slider value when hovering over the slider track (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.
Text input suffix	textInputSuffix	Value "appended" at the end of the slider's text field. Can be fed 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.
Minimum value exceeded message	minValueSuggest	Text displayed under the slider's text field when exceeding the minimum value. Feature availability depends on the license and may not be available in all deployments.
Maximum value exceeded message	maxValueSuggest	Text displayed under the slider's text field when 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 — on the Slider by default the values maxValue and maxBlockValue should match, unless they are intentionally different (then the Slider value will be limited to min (maxBlockValue, maxValue), so the upper limit will be the smaller of these values.). Similarly for minValue and minBlockValue.

In the Slider component (in the properties) it is not possible to set the starting/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 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. For this, the Slider should listen to the TextField and point to that text field in the property Data source from another field of the Slider.

Slider with example properties

Illustration 1. Example appearance of the component on the application

Specific appearance of the Slider

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

Illustration 2. Example appearance of Slider with text field

Illustration 3. Example appearance of Slider with parameters provided 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 feed another field with the value of that property, can be obtained using the construct COMPONENT_ID$PROPERTY_NAME

For the slider you can retrieve the following property:

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

Example: feeding 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 attaching the validator below, as a parameter you should enter insuranceComponentId the id of the component referring to the insurance (e.g. a checkbox controlling enabling/disabling the insurance) and as sliderId provide the id of the Slider on which you want to control the amounts. If the mentioned components are not embedded directly on the application, you should provide the full embedding path, i.e. the id of the composite component that contains those 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 insurance value");
        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 greater 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 greater 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