# Slider {% hint style="info" %} Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. {% endhint %} Komponent pozwalający na wybranie wartości numerycznych przy pomocy suwaka. ![](/files/97f38bdf23486140af8f291a04616418c549c77f) ✅ **Kiedy stosować:** * Gdy chcesz pozwolić na wpisanie dowolnej, precyzyjnej kwoty w polu tekstowym (np. kwota kredytu 5200 PLN), niezależnie od kroku suwaka (np. 500 PLN). * Gdy potrzebujesz wizualnie ograniczyć zakres wyboru bez zmiany widocznej skali – właściwości `minBlockValue` i `maxBlockValue` pozwalają na dynamiczną blokadę suwaka (np. na podstawie zdolności kredytowej klienta formularz ogranicza zakres do 5000 PLN, mimo że maksymalna kwota oferowana przez bank to 10 000 PLN). :x: **Kiedy nie stosować:** * Gdy proces nie pozwala na stosowanie wartości pośrednich (np. wniosek dopuszcza tylko konkretne wartości, np. liczbę rat). **Stosuj**: [Step Slider](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/step-slider.md). ## Właściwości komponentu | **Właściwość Eximee Designer** | Nazwa atrybutu w Źródle | **Opis** | | ------------------------------------------------------------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Krok, co jaki można ustawić wartość na suwaku** (sekcja **Podstawowe właściwości**) | step | Skok wartości, czyli krok, co jaki można ustawić wartość na suwaku (domyślnie wartość 100). | | **Wartość startowa suwaka** (sekcja **Podstawowe właściwości**) | startValue | Wartość startowa suwaka (domyślnie pusta). Może być zasilona z usługi. | | **Minimalna prezentowana wartość suwaka** (sekcja **Podstawowe właściwości**) | minValue[^1] | Wartość minimalna suwaka (domyślnie wartość 0). Może być zasilona z usługi. | | **Maksymalna prezentowana wartość suwaka** (sekcja **Podstawowe właściwości**) | maxValue[^1] | Wartość maksymalna suwaka (domyślnie wartość 1000). Może być zasilona z usługi. | | **Minimalna możliwa wartość** (sekcja **Podstawowe właściwości**) | minBlockValue[^1] | Minimum, poza które nie będzie można wybrać wartości (domyślna wartość 0). Może być zasilona z usługi. | | **Maksymalna możliwa wartość** (sekcja **Podstawowe właściwości**) | maxBlockValue[^1] | Maksimum, poza które nie będzie można wybrać wartości (domyślna wartość 1000). Może być zasilona z usługi. | | **Wartość sugerowana** (sekcja **Podstawowe właściwości**) | suggestedValue | Wartość sugerowana (np. w przypadku limitu odnawialnego wysokość limitu sugerowana przez bank). Może być zasilona z usługi. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Suffix etykiety minimalnej i maksymalnej wartości suwaka** (sekcja **Pozostałe**) | legendSuffix | Wartość "doklejana" do etykiety minimalnej i maksymalnej wartości slidera. Może być zasilona z usługi. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Prognozowana wartość suwaka po najechaniu na oś** (sekcja **Pozostałe**) | showPredictionTooltip | Pokazywanie prognozowanej wartości suwaka po najechaniu na oś suwaka (domyślna wartość "true"). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Prezentacja w dymku wartości wskazywanej przez suwak** (sekcja **Pozostałe**) | showTooltip | Pokazanie wartości wskazywanej przez suwak (domyślna wartość "true"). Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Formatter wartości wyświetlanej w polu tekstowym** | textInputFormatter | Formatter wartości wyświetlanej w polu tekstowym slidera. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniami. | | **Suffix pola tekstowego** | textInputSuffix | Wartość "doklejana" na końcu pola tekstowego slidera. Może być zasilona z usługi. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Opis wyświetlany po kliknięciu w pole tekstowe** | descriptionPopupText | Opis wyświetlany po kliknięciu w pole tekstowe slidera. Funkcjonalność dostępna w kanale mobilnym i native. | | **Komunikat przekroczenia wartości minimalnej** | minValueSuggest | Tekst wyświetlany pod polem tekstowym slidera po przekroczeniu wartości minimalnej. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Komunikat przekroczenia wartości maksymalnej** | maxValueSuggest | Tekst wyświetlany pod polem tekstowym slidera po przekroczeniu wartości maksymalnej. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Synchronizacja stanu suwaka i wartości wpisanej w polu tekstowym** | separatedSliderValue | Steruje synchronizacją stanu suwaka i wartości wpisanej w inpucie. Przy separatedSliderValue=true nie są respektowane wartości minBlockValue oraz maxBlockValue. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | {% hint style="warning" %} WAŻNE — na Sliderze domyślnie wartości maxValue i maxBlockValue powinny się pokrywać, chyba że celowo mają się różnić (wtedy wartość Slidera będzie ograniczana do min (maxBlockValue, maxValue), więc górnym ograniczeniem będzie najmniejsza z tych wartości.). Analogicznie z wartościami minValue i minBlockValue. W komponencie Slidera (we właściwościach) nie ma możliwości ustawienia wartości startowej/minimalnej/maksymalnej na wartości innego typu niż integer. {% endhint %} > Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md) ## Przepisanie wartości slidera do Pola tekstowego (TextFielda) i odwrotnie Jeśli wartość Slidera ma zostać przepisana do komponentu Pole tekstowe, komponent ten musi nasłuchiwać na Slider, a przepisanie wartości nastąpi albo przez wskazanie slidera w **Źródło danych z innego pola** komponentu tekstowego, albo dla Pola tekstowego zostanie ustawiona specjalna usługa (np. *EchoService*). Także wartość Slidera może zostać ustawiona na podstawie liczby wpisanej do komponentu Pole tekstowe. W tym celu należy Sliderem nasłuchiwać na TextField i wskazać to pole tekstowe we właściwości **Źródło danych z innego pola** Slidera. ### Slider z przykładowymi właściwościami ![Ilustracja 1. Przykładowy wygląd komponentu na wniosku](/files/837bb525f895e5a9b741a82df9d15c391d3a90eb) ### Specyficzny wygląd Slidera {% hint style="info" %} Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. {% endhint %} W niektórych szatach pole tekstowe jest już zintegrowane ze sliderem. ![Ilustracja 2. Przykładowy wygląd Slidera z polem tekstowym](/files/8d49d682b196c92dbce70e708bd846a1b26844db) ![Ilustracja 3. Przykładowy wygląd Slidera z parametrami podawanymi w polach tekstowych](/files/0ee0be627e1809d9bc400c595623aec01000d429) ## Informacje o stanie komponentu Informacje o aktualnej wartości danej właściwości komponentu, którą można następnie wykorzystać na wniosku np. do zasilenia innego pola wartością tej właściwości, można uzyskać stosując konstrukcję ID\_COMPONENTU$NAZWA\_WŁAŚCIWOŚCI Dla slidera można pobrać następującą właściwość: | Klucz | Opis | | --------------- | ------------------------------------------------------------------------------------------------------------------------- | | **sliderValue** | Wartość oznaczona na suwaku. W przypadku oznaczenia separatedSliderValue na true, może różnić się od wartości komponentu. | {% hint style="info" %} Przykład: zasilenie **Źródło danych z innego pola** poprzez GesSlider1$sliderValue {% endhint %} ## Przykładowy walidator dla Slidera Walidator wyświetla hint dla Slidera w określonych sytuacjach. Podczas podłączania poniższego walidatora należy jako parametr *insuranceComponentId* wpisać id komponentu odnoszącego się do ubezpieczenia (np. checkboxa sterującego włączeniem/wyłączeniem ubezpieczenia) oraz jako *sliderId* podać id Slidera, na którym kwotami chcemy sterować. Jeśli wymienione komponenty nie są osadzone bezpośrednio na wniosku, to należy podać pełną ścieżkę osadzenia, czyli id komponentu złożonego, w którym znajdują się te komponenty oraz każdego komponentu złożonego nadrzędnego.
Przykładowy kod walidatora {% 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 = "Walidator zwracający komunikat walidacyjny w formie hinta dla slidera."; this.fields.put(SLIDER_INPUT, "Wartość ze slidera"); this.fields.put(SLIDER_ID, "Identyfikator walidowanego slidera"); this.fields.put(INSURANCE_AMOUNT_THRESHOLD, "Próg dla kwoty z ubezpieczeniem"); this.fields.put(MAX_AMOUNT, "Maksymalna wartość w sliderze"); this.fields.put(MIN_AMOUNT, "Minimalna wartość w sliderze"); this.fields.put(INSURANCE_CURRENT_VALUE, "Aktualna wartość ubezpieczenia"); this.fields.put(INSURANCE_COMPONENT_ID, "Identyfikator komponentu ubezpieczenia"); this.fields.put(INSURANCE_UNCHECKED_VALUE, "Wartość niezaznaczonego ubezpieczenia"); this.possibleErrors.put(LESS_THAN_MIN, "Minimalna kwota pożyczki to {0} PLN"); this.possibleErrors.put(GREATER_THAN_MAX, "Dla pożyczki wyższej niż {0} PLN na rękę musimy zadać Ci kilka dodatkowych pytań."); this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD, "Jeżeli chcesz pożyczkę z ubezpieczeniem wyższą niż {0} PLN na rękę, odwiedź dowolny oddział Banku."); this.possibleErrors.put(LESS_THAN_MIN_BUTTON_LABEL, "Rozumiem >"); this.possibleErrors.put(GREATER_THAN_MAX_BUTTON_LABEL, "Tak, chcę wnioskować o {1} PLN"); this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD_CHANGE_AMOUNT, "Zmniejszam kwotę"); this.possibleErrors.put(GREATER_THAN_INSURANCE_TRESHOLD_WITHOUT_INSURANCE, "Bez ubezpieczenia"); } @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" %} Wniosek demo: demoSlider Wniosek demo w wybranych wdrożeniach: demoSliderValidationHint {% endhint %} {% hint style="info" %} ♿WCAG: [Dobre praktyki WCAG dla low-code dev](/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki.md) {% endhint %} [^1]: Wartość Slidera będzie ograniczana do min (maxBlockValue, maxValue), więc górnym ograniczeniem będzie najmniejsza z tych wartości. --- # Agent Instructions: 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: ``` GET https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/3-wartosci-i-skale/slider.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.