---
description: Modular Option Widget 2 of 4
---

# Slider

If OptionSelector was the most code-heavy of all four, then ModularSlider is the most light-weight :smirk:

***

Before we begin, I want to mention that there some _'User Specified'_ fields that spreads among <mark style="color:green;">**all four**</mark> **`Modular Options`** types. And it is unnecessary to mention those furthermore:

* `Default Value`
* `Custom Default Value`
* `Option Name`
* `Option Tool Tip`
* `Auto Apply`

So as you can see, there weren't that many unique fields for the `Option Selector` in the previous chapter.

***

In your Page find and add `WBP Modular Slider` the same way you added `Selector`:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2F1CQqN2X1O5BYAvGv50cJ%2FAdding%20SLider%20to%20the%20page.png?alt=media&#x26;token=edf321a0-8882-4030-823c-d656872a0c91" alt="" width="276"><figcaption></figcaption></figure>

Setup `Slider` the same way you did with `Selector`:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2F3yKmUzC141OJ2LRdmz28%2FSpecifing%20Slider.png?alt=media&#x26;token=aac23a8c-e658-4167-b9cc-20b34bedc7be" alt=""><figcaption></figcaption></figure>

As you notice, there are a few new fields:

* `Min Value`, `Max Value`, `Step Size` - are all direct parts of the native Unreal Engine `slider` and i think don't require any explanation.
* `Value Suffix:` is the Text-thing that supplements value. You could see those in the already implemented `Sliders` of this Menu, like `%` or `fps`. It could be anything, or it can be nothing. Make it empty so there will be just value displayed.
* `Display Value:` ...

***

### Now lets take a look at its functional part.

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FUpYQPmhrmtFpHK2bH65t%2FSlider%20selecting%20Event.png?alt=media&#x26;token=ff96ec62-2ad9-430a-8ebf-4c84faaa9a62" alt=""><figcaption></figcaption></figure>

Main Event for the slider is the same, with a difference that it produces <mark style="color:green;">`Float`</mark> instead of <mark style="color:blue;">`Int`</mark>:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2F9salikC5kZvGCzFyxkjj%2FSlider%20Event%20handling.png?alt=media&#x26;token=66f7c0b2-8880-479c-b869-f73aed272cae" alt=""><figcaption></figcaption></figure>

You can test-out rest of the things by yourself the same way you did in the previous `Selector` chapter. Everything in this project aimed to be rather uniform, so the `Slider` has the same `Select Options`-like functions but named differently:

<figure><img src="https://3202416498-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwlDZAQc635Buuq6HL7c0%2Fuploads%2FRDnTgmuec4zmKPp0Jgtz%2FSlider%20change%20values%20functions.png?alt=media&#x26;token=c709625b-0e00-44da-a044-e9eb99a11df2" alt=""><figcaption></figcaption></figure>

&#x20;and `Custom Default Value`, `Auto-Apply` works the same way as well.
