# HELP: How to make slider button

**URL:** <https://discourse.processing.org/t/help-how-to-make-slider-button/36889>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [May 15, 2022, 6:00am UTC](https://discourse.processing.org/t/help-how-to-make-slider-button/36889 "2022-05-15T06:00:31Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![xie](https://avatars.discourse-cdn.com/v4/letter/x/ce73a5/32.png) [@xie](https://discourse.processing.org/u/xie)\
**Post date:** [May 15, 2022, 6:00am UTC](https://discourse.processing.org/t/help-how-to-make-slider-button/36889/1 "2022-05-15T06:00:31Z")

</div>

hi! How do you make a slider with buttons on each side that control the movement of the pointer? Thanks!

@TfGuy44 @CodeMasterX

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 15, 2022, 7:34am UTC](https://discourse.processing.org/t/help-how-to-make-slider-button/36889/2 "2022-05-15T07:34:56Z")

</div>

Hi and welcome

Search the forum you can find many examples

---

<div class="post-metadata">

**Author:** ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)\
**Post date:** [May 15, 2022, 7:41am UTC](https://discourse.processing.org/t/help-how-to-make-slider-button/36889/3 "2022-05-15T07:41:46Z")

</div>

Read this Link there is sliders included in some examples

> [@How to make a slider](https://discourse.processing.org/t/how-to-make-a-slider/27073/4):
>
> When I first started programming, I made a color creator program with sliders int w = 600; int h = 600; float r = 125; //red part float g = 50; //green part float b = 5; //blue part float range = 500; //size of slider float yrange = 25; float min = 0; float max = 255; float xR = w / 2; //where is red slider float xG = w / 2; //where is green slider float xB = w / 2; //where is blue slider float yR = w/3 \* 2; //where is red slider f…

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 15, 2022, 9:07am UTC](https://discourse.processing.org/t/help-how-to-make-slider-button/36889/5 "2022-05-15T09:07:02Z")

</div>

You have a couple of options

1. Create the controls from scratch
2. Use one of the contributed libraries. Both G4P and controlP5 are long established and well supported libraries.

If you go for (2) then and if these libraries don’t have the exact control then you can simulate it with a slider and two buttons. In the button event handlers you can change the slider value and hence move the thumb.

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [May 15, 2022, 9:40am UTC](https://discourse.processing.org/t/help-how-to-make-slider-button/36889/7 "2022-05-15T09:40:20Z")

</div>

You might look at some examples.

In Processing select **File \> Examples** and in the popup window select **Topics \> GUI** try the examples and try and understand the code.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 15, 2022, 11:23am UTC](https://discourse.processing.org/t/help-how-to-make-slider-button/36889/8 "2022-05-15T11:23:57Z")

</div>

> [@xie](#):
>
> can you please give me an idea on how to start it from scratch

See jafal’s link above please