# Sliders

## Motion Functions

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td>Didactic Function</td><td><a href="/files/x41a7ivZcAAZ3hKSiujf">/files/x41a7ivZcAAZ3hKSiujf</a></td></tr><tr><td>Feedback Function</td><td><a href="/files/4Vi86ikzUUWfLWWbMKKU">/files/4Vi86ikzUUWfLWWbMKKU</a></td></tr></tbody></table>

The function of motion in a slider is Didactic and Feedback. Changes in values in sliders can be highlighted by numerical or text changes and visual indicators that correspond to the slider's use. Motion can highlight the relationship between the range in which the slider moves and the properties affected by this change.&#x20;

## Examples

<figure><img src="/files/uKKpS7ewsqftKKmLF5fH" alt=""><figcaption><p>Rating slider by Aaron Iker</p></figcaption></figure>

In the above example, the change in the value of the slider leads to a change in the emotion conveyed by the face that matches the selected range in the slider. This change in emotion conveys didactic information to the user about the properties of the slider. Additionally, the principle of parenting demonstrates to the user that when the slider changes, so does the emotional response with the emoji.&#x20;

<div><figure><img src="/files/OEL8kHT2YwuetAOLrZdz" alt=""><figcaption><p>UI/UX slider by Benjamin Zehrfeldt</p></figcaption></figure> <figure><img src="/files/PKrSBqsXjpX4n5fQjTeM" alt=""><figcaption><p>Weight slider exploration designed by Tony Pinkevych</p></figcaption></figure></div>

The slider above demonstrate the principle of value change. The dynamic changing of the values shows the user what the selection they are making is. Secondary animations with the color change on the left and the change in boxes on the right serve to reinforce the action that the user takes. These actions inform the user that they may be reaching an upper or lower bound of the slider.&#x20;

<figure><img src="/files/1NdtGFNGN8jxdaGbQGKg" alt=""><figcaption><p>Slider designed by Oleg Frolov</p></figcaption></figure>

Similarly, this example also demonstrates a value change along with the parenting principle. When the slider moves across space, the value contained within changes. This gives the user information that moving it across the line will change the relationship it has with the number and will also give them the magnitude of the change.&#x20;


---

# 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://abhishekshankar.gitbook.io/uxm/the-system/selection-components/sliders.md?ask=<question>
```

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.
