--- category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend] keyword: [Extend, Presentation Components, widgets, tags, UI components] nav: wcp_docs parent_url: /wcp_docs/ title: snapSlider layout: subsection wd_wcptag: snapSlider --- Displays values in a slider and enables the user to select a value. Use `snapSlider` only on edit pages. The `snapSlider` widget value is a list of strings. ## Usage To define the values in the slider, use 1 of these mutually exclusive attributes: - values Specify `values` with endpoint data, which must be a list containing the `id` and `descriptor` fields. Using the `values` attribute is the most commonly used way to populate a list. This sample `snapSlider` displays the `descriptor` values from the project hours data: ``` { "type": "snapSlider", "label": "snapSlider using values", "id": "snapSlider1", "values": "<% projectHours.data %>" } ``` The `values` data must contain a minimum of 2 and maximum of 15 values. - instanceList Specify `snapSlider` with an array of hard-coded `id` and `descriptor` fields. Example: ``` { "type": "snapSlider", "label": "snapSlider using instanceList with Fixed Values", "id": "snapSliderWithHardcodedValues", "instanceList": [ { "id": "1", "descriptor": "Strongly Disagree" }, { "id": "2", "descriptor": "Disagree" }, { "id": "3", "descriptor": "Neutral" }, { "id": "4", "descriptor": "Agree" }, { "id": "5", "descriptor": "Strongly Agree" } ] } ``` The `instanceList` array must contain a minimum of 2 and maximum of 15 values. - instanceListLoopTag Specify `snapSlider` with the `instanceLoop` tag, which contains a template instance for populating the slider. `instanceListLoopTag` populates the slider by looping through the data from another source on the same page (such as an endpoint). `instanceListLoopTag` enables you to reshape the data into the `id` and `descriptor` fields as it loops through the data. In comparison, the `values` attribute expects the `id` and `descriptor` fields (or their equivalent) at the root level data. Example: ``` { "type": "snapSlider", "label": "snapSlider using instanceListLoopTag", "id": "snapSliderUsingInstanceListLoopTag", "instanceListLoopTag": { "id": "projectHour", "type": "instanceLoop", "templateInstance": { "id": "<% instance.projectHour.id %>", "descriptor": "< %instance.projectHour.descriptor %>" }, "on": "<% projectHours.data %>", "as": "instance" } } ``` The `instanceListLoopTag` data must have a minimum of 2 and maximum of 15 values. Note: Because screen readers announce the numerical position of the slider, we recommend not using a numeric value at the beginning of the label for each position to avoid confusion for users. ## Mobile Support Android, iOS ## Attributes - helpText Data type: binding-String Text that displays when a user hovers their cursor over the widget. Note: The Chrome browser truncates the tooltip to 1400 characters. - id Data type: binding-String Unique identifier used to reference this widget from other tags. Notes: - The `id` must start with a letter. - The `id` must be unique per page. - To enable other widgets to reference this widget `id`, place this widget before the other widgets on the PMD. The PMD validation returns an "Undefined variable" error if it doesn't find a previously defined `id` in the PMD. - Workday recommends that you include the `id` in your tag definitions for debugging purposes. - instanceList Data type: list of instance objects An array of `id` and `descriptor` values in the list. Example: ``` "instanceList": [ { "id": "1", "descriptor": "Yes" }, { "id": "2", "descriptor": "No" } ] ``` Notes: - You can't combine `instanceList` with the `instanceListLoopTag` or `values` attributes to populate a list. These attributes are mutually exclusive. - To enable the related actions menu and view link, set the `wid` attribute. Specify the binding to the ID field containing the instance Workday ID. For details, see Enabling the Related Actions Menu in [instanceList](/wcp_docs/hcb1512514976081.html). - instanceListLoopTag Data type: instanceLoop Note: Workday recommends using PMD scripting with the `values` attribute to reshape data instead of the `instanceListLoopTag` attribute. Creates list values by using a template instance while iterating through a data collection. The `instanceListLoopTag` attribute is an [instanceLoop](/wcp_docs/fem1530169946255.html) tag that specifies the: - `templateInstance` - Contains the template `id` and `descriptor` fields for a list item. You can specify root-level or nested fields. - `on` - The binding to the data collection. - `as` - The variable reference for each instance. - `limit` - Optional maximum number of list items. Example: ``` "instanceListLoopTag": { "type": "instanceLoop", "id": "sampleInstanceListLoopTag", "templateInstance": { "id": "<% workerInstance.primarySupervisoryOrganization.id %>", "descriptor": "<% workerInstance.primarySupervisoryOrganization.descriptor %>" }, "on": "<% workers.data %>", "as": "workerInstance", "limit": 5 } ``` Note: You can't combine `instanceListLoopTag` with the `instanceList` or `values` attributes to populate a list. These attributes are mutually exclusive. - label Data type: dynamicBinding-String Text that displays beside or above most widgets. Often used in simple widgets that include inputs. The maximum number of characters is 255. - render Data type: binding-Boolean If true, this tag renders as a widget on the page. If false, the loaded page doesn't add this tag or its children. The default is true. Unlike the `visible` attribute, when `render` is false, other tags on the page can't reference this tag or widget on edit pages. On view pages, a tag can't reference other tags regardless of the `render` attribute value. - required Data type: dynamicBinding-Boolean If true, the user must enter a value on the widget before submitting the page. - selectedValues Data type: dynamicBinding-List List of IDs that specify the default, pre-selected values on the widget. The IDs must be a subset of the IDs in either the `values` or `instanceList` attribute. Use `selectedValues` only on edit pages. - sortOrder Data type: binding-String When you set `sorted` to true on the `section` or `fieldSet` parent of this widget, the `sortOrder` attribute determines the order of this widget within its parent. The sort order is relative to the siblings of the widget. Typical values are "a", "b", "c", and so on. Example: The widget with `"sortOrder": "a"` displays before the widget with `"sortOrder": "b"`. Note: The `sortOrder` doesn't apply to sorting data on the widget. `sortOrder` only applies to the placement order of the widgets within the parent widget. - values Data type: dynamicBinding-List Defines all possible values that a user can select from a list. Each value defaults to an id and descriptor for persistence and display. You can customize these values on the idKey and displayKey attributes. Note: You can't combine `values` with the `instanceList` or `instanceListLoopTag` attributes to populate a list. These attributes are mutually exclusive. - visible Data type: dynamicBinding-Boolean If true, the widget generated by this tag is visible. If false, this tag and its children tags aren't visible. This tag provides the ability to display or hide the widget dynamically based on user interactions on the page. The default is true. Unlike the `render` attribute, the generated widget persists on the page even when `visible` is false. Notes: - When the widget or field you’re hiding changes on the page, you must include it inside a `fieldSet`. - When the `visible` attribute is false for this widget on an edit page, the outbound endpoint doesn't include the `valueOutBinding` or `valuesOut` data of the widget in the payload. To include the `valueOutBinding` or `valuesOut` data in the payload, use the `onSend` event handler.