Changing Slider Values (0-255) by +1 or -1

[Olka]

Hello,

I’m new to MIT App Inventor, and I’ve found many solutions to my problems thanks to this forum. A big thank you to the community for all the valuable information shared.

Unfortunately, I’m stuck on one point. The question has already been asked, but I don’t quite understand the answer.

I have a slider with values ranging from 0 to 255. I’d like to click a "+" button to increment the slider by 1 and a "-" button to decrement it by 1.

I’m facing the same issue as in the following link:

Incrementing a slider

Hello, I would like to move a slider to the left or to the right with + or - buttons. I would like the value of the thumb position to be between 1000 and 2000 and increment by 5 the value of the thumb position each time I press a button. here’s an example : Increment_Slider.aia (2.1 KB) [blocks] When i press the button +, it increments by 5 but when i press the button -, it decrement by -10, although the blocks are the same either way. Why is that ?

When I click "+", there’s no problem. However, when I click "-", the slider decreases by 3 instead of 1.

After some research, it seems that the slider decreases by 2.55 at a time, according to this source :

https://groups.google.com/g/mitappinventortest/c/e-64Ldc1qbE/m/KK-en28sCAAJ

ex.
min value -> max value
0 -> 100 each step has a value of 1 (100/100) = 1
0 -> 200 each step has a value of 2 (200/100) = 2
0 -> 255 each step has a value of 2.55 (255/100) = 2.55
0 -> 500 each step has a value of 5 (500/100) = 5

In your case when you have value 1-> 500 will be a little different as you already occupy 1 point/step, see the attachment..

as you get the wrong value when you try to go programmatically to 100, as I mentioned 100 "points/steps"
to position it so close to 100 it needs 20 "points/steps" 500/100 = 20
you already occupy 1 point/step and now it will be only 19 left, 499/100=4,99-> 19*4,99=94,81 plus the one we already occupied 94,81+1= 95,81

For my rgb app (youtube) I have manipulated the programmatic value from 100 to 255 so it gives me one step at a time..

/Boban

Anke provided a solution, but I’m having trouble understanding it and adapting it to my case :

Incrementing a slider - #5 by Anke

Increment_Slider2.aia (3.1 KB)

Could someone please clarify this for me? My sliders have different value ranges:

The RGB sliders go from 0 to 255,

Slider A goes from 0 to 170,

Slider V goes from 0 to 1000.

Thank you in advance for your help!

I forgot: is it possible to speed up the value change by holding down the - or + button, instead of having to click to add or subtract 1 each time?

My aia :

Slider255.aia (73.4 KB)

[TIMAI2]

Make a custom slider with a canvas ?

METRIC RAT AI2 - Make Your Own Sliders

[Lito]

@Olka

I have a slider with values ranging from 0 to 255. I’d like to click a "+" button to increment the slider by 1 and a "-" button to decrement it by 1.

@Olka

When I click "+", there’s no problem. However, when I click "-", the slider decreases by 3 instead of 1.

First of all:

To define what will be the minimum and maximum range of your Slider control, you need to define this on the properties of the control, in the Designer »

If you want the values ​​of 0 and 255 you will have to define this in advance in the Designer (including the starting position of the Slider inThumbPosition) or in the Block » When Screen1.initialize at the beginning of programming... and store these values ​​in global variables... for them to be compared to later when using them Individual 'minus' & 'plus' Buttons and not the 'Slider' itself »

Second »

By using the custom increments or decrements you want for the individual Buttons, you will need to make comparisons BEFORE (not to exceed the limits) and you will also need to maintain a constant control of the Slider position, regardless of obtaining this position from the Slider properties »

Third »

In turn, when the Slider changes its position when using sliding control, using its own increments and according to the millimeter position where the finger releases the Slider, the final position should also be stored for future use of individual Buttons »

The question that stays in the air is:

Why use the Slider resources when the need to subtract or add such specific increments could be replaced by the individual Buttons about the value of a Label that do exactly what you want?

Just because the Slider design is nice? ^^

Lito

@>-->---

[Olka]

Make a custom slider with a canvas ?

I would use the default slider

---

Thanks Lito but the probleme stay the same.

I replicated your exact setup using the same blocks.

If the maximum value (vmax) = 2000 and the minimum value (vmin) = 0 (this also works for vmax = 2000 and vmin = 1000), then:

When I click the + button, the label increases by 1 (everything works correctly).

When I click the - button, the label decreases by 1 (everything works correctly).

However, if the maximum value (vmax) = 255 and the minimum value (vmin) = 0 (with Current_pos = 128), then:

When I click the + button, the label increases irregularly (e.g., 1.xx):

First click = 129

Second click = 130

Third click = 130.05

... = 131.05

... = 132.05

... = 132.6

And when I click the - button (with Current_pos = 128), the label decreases by 2.55 regularly:

First click = 124.95

Second click = 122.4

Third click = 119.85

... = 117.3

... = 114.75

.... = 112.2

I need these buttons to provide precise values (more precise than using my finger on the slider).

[TIMAI2]

@Olka

I would use the default slider

Given your findings, perhaps you might reconsider ?

[Olka]

@TIMAI2

Given your findings, perhaps you might reconsider ?

I've tried to work on the link you gave me but I can't seem to increase the value of the sliders with a button.
I'm having trouble understanding the logic in relation to the original sliders.

[TIMAI2]

Try this

makeYourOwnSliderWithButtons.aia (4.7 KB)

[ABG]

This is a slider with a zoom feature.

slider_magnified.aia (4.2 KB)

[Lito]

@Olka

I need these buttons to provide precise values (more precise than using my finger on the slider)

@Olka If you need increments in whole values, the Slider will be completely useless to control this in this way, as its natural operation eventually results in fractions... Nevertheless, I understand that you like its look.

So I found a solution to you, which keeps precise control using only the Buttons, cancels the event that checks the change of Slider position, but maintains it as a decorative Component that visually illustrates the proportional status of the increments.

Once the Slider will not be used, do not touch it ... because if it changes your position manually, this will have no effect on the value of 'current pos' (which is what matters) and as soon as you operate the increments again by Buttons, the Slider's position will be updated.

A new layout, with increments of 1, 5 & 10 helps supply the 'lack' of this decorative slider, facilitating advances greater than 1. »

Control_decorative_slider_with_buttons.aia (4.2 KB)

Lito

@>-->---

[uskiara]

Dear @Olka,
I've seen that your problem has interested many other users in the past and some solutions have been already presented (in the past and currently).
Assumed that the use of canvas and own "sliders" could be the easiest way to overcome the issue of the discrepancy between pixels and position (as suggested by @TIMAI2, and it's what I do typically either), I've tried to use standard sliders and buttons, as per your wish.
The annexed aia shows my approach.
Here below the blocks and some comments:
sliders.aia (3.9 KB)

The ratoinale behind all is that the event PositionChanged is the cause of the misalignment (as @Lito has already highlighted) between the position reached by the fingers and the one set by means of the buttons (But+ and But-). To avoid this misalignment you will see that in my blocks the buttons, when hit, don't set the thumb position so to avoid the event. This allows to increment and decrement the variable that contains the "true" value.without the side effect of suddenly change it of an unwanted amount due to the misalignment generated by the PositionChanged event. In this way the variable can be increased and decreased by 1 at any button pressed. After one second of inactivity of the buttons, a clock repositions the slider to the value set by the buttons. So when you move by fingers the thumb, it will start again from the "correct" position. On the other side, when you stop the movement by fingers, the "true value" variable is then set accordingly, so by pressing the Buttons +/-, you will see that the value increases and decreases by 1 from the last value left by the fingers. (I hope I've been clear, because I'm not of English native language !). In the PositionChanged event you see that there is a boolean value whose effect is to skip the first event after it has been raised by the clock: this is necessary because I've seen that the event is raised twice, and this contributes to the misalignment.
In a nutshell, try the aia, and see if it works as I've said (on my Lenovo pad it works ).
I believe it souldn't be so hard to adapt it to your needs (if you want to use it, of course).
Antway it has been a nice challenge to fight !!!
Best wishes.

EDIT I've seen that the event is raised twice every time the thumb movement is not an integer value: i.e. if the movement contains a decimal part. This is possibly caused by the ratio between the number of pixels of the width of the slider (graphical range) and the numerical range (in your case 0-255). Not 100% sure ( but 99%.... ).

EDIT2: as you can see from the code, most probably you don't need to separate ButPlus and ButMinus, but I did so, just to make it more clear (at least to me !).

[TIMAI2]

If you can use extensions, this is all easily resolved by:

Slider - Customize Slider Colors: Right, Left & Thumb

Slider Customize Slider Colors: Right, Left & Thumb. Events that fire when the thumb is released, when it reaches the maximum value, and when it reaches the minimum value. [GIF_20250209_014119_920] Values ​​can be decimal or integer. The gif shows the default values, which are 0 to 100 in increments of 1. InitializeSeekBar [blocks (90)] SetSliderRange [blocks (89)] Sets the range and increment of the Slider. Values ​​can be with decimal or integer. GetCurrentSliderValue [blo…

Some blocks

Screen

@Joejsanz

Blocks update for version 1.01 of extension

(You now have to add a label to display position)

[Olka]

I wanted to thank you all for taking the time to try and solve my problem, I really appreciate it! I also learned new things thanks to your diagrams!

I had seen this extension before, but I only watched the video and thought it was about music. Next time, I'll make sure to read the descriptions more carefully!

I also want to mention that another *.aia helped me. By copying some of its blocks, I was able to achieve what I wanted. Here’s the link:

CuloriHSV.aia (106.8 KB)

I hope you didn’t struggle as much as I did!
I think I'll be using the Customizable Simple Slider extension. Once again, a huge thank you to everyone—long live MIT App Inventor and all of you!

[app.inventor.yt]

I was able to achieve this with a slider block and will post it.

1. minvalue and maxvalue can be changed. Negative numbers can also be set.
2. The +1 and -1 buttons can be used to increase and decrease values.
3. Press and hold the +1 and -1 buttons to increase or decrease the value continuously. However, the slider will not change until the button is released.

<< All Blocks >>

[TIMAI2]

@app.inventor.yt

This is similar to @uskiara 's method.

The issue is that the default slider only has 100 steps, so it cannot accurately report 255 steps

There is a PR submitted for this issue:

High fidelity slider

[Joejsanz]

There is a new update to the slider extension where some details are corrected:

@Joejsanz

---

Update:

• Removed 2 functions that were not needed:
  SetStartValueLabel and SetCurrentValueLabel
• Centered the Slider, since not using the 2 functions I mentioned, the slider was at the top.
• Changed the default value when not using the SetSliderRange function:
  • min: 0
    max: 100
    increment: 1

---

Extension: Version 1.0.1.
joejsanz.joedevslider.aix (11.7 KB)

[uskiara]

Dear @TIMAI2, @ewpatton,
I didn't know that there already was a PR about this issue
Anyway, with the aim of supporting the investigation, what I've seen is that the PositionChanged is issued (at least) twice when the increment, or decrement, is not an integer value, that is to say when it contains a decimal part. Furthermore this happens more often when decreasing (Button "Minus") than when increasing (Button "Plus"). The decrement seems to be about a value -2.xx (honestly I've haven't precisely verified the decimal quantum, but could it be related to the numerical range 0-255 ???). This value seems also to be independent with regard to the width of the graphical range of the slider: I've tried the first time with a graphical width of 1024 and the second trial with width of 512 pixels (numerical range always 0-255).
Development Environment:
OS Win 10, Browser Brave, server ai2.appinventor.mit.edu, Project settings: Tablet Size, Orientation not specified,
Target device:
Lenovo Pad 10", Android 10.

[uskiara]

Great !!!