> 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/slider.md). # Slider {% hint style="info" %} Availability of functionality depends on the license and may not be available in all deployments. {% endhint %} A component that allows selecting numeric values using a slider. ![](/files/356a10b8b67126c91703e2fe3aabebc6e0e18f8f) ✅ **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). :x: **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](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/step-slider.md). ## 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[^1] | Minimum slider value (default value 0). It can be populated from a service. | | **Maximum displayed slider value** (section **Basic properties**) | maxValue[^1] | Maximum slider value (default value 1000). It can be populated from a service. | | **Minimum possible value** (section **Basic properties**) | minBlockValue[^1] | 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[^1] | 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. | {% hint style="warning" %} 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. {% endhint %} > More information about component properties: [Common component properties](/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md) ## 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](/files/d309cd31dfe622774dc7bf45dadac09c7c22422b) ### Specific appearance of the Slider {% hint style="info" %} Availability of functionality depends on the license and may not be available in all deployments. {% endhint %} In some themes the text field is already integrated with the slider. ![Figure 2. Sample appearance of the Slider with a text field](/files/94e207d8f5e08c40c69a26dfbfd7f3c07c617df6) ![Figure 3. Sample appearance of the Slider with parameters entered in text fields](/files/eeedcc56e88bea5045804ef6105e0d46f499e5e3) ## 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. | {% hint style="info" %} Example: populating **Data source from another field** via GesSlider1$sliderValue {% endhint %} ## 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 {% code title="DevDemoSliderHintValidator.java" %} ```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 {0} PLN"); this.possibleErrors.put(GREATER_THAN_MAX, "For a loan higher than {0} PLN 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 {0} PLN 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; } } ``` {% endcode %}
{% hint style="info" %} Demo application: demoSlider Demo application in selected deployments: demoSliderValidationHint {% 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 %} [^1]: The Slider value will be limited to the min (maxBlockValue, maxValue), so the upper limit will be the smaller of these values. --- # 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/slider.md?ask=&goal= ``` `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.