Slider - Customize colors. Add icon/image as thumb. Indicator bubble

Slider
Customize colors | Add icon/image as thumb | Indicator bubble.

GIF_20250414_014555_612


Initialize

Initializes the slider with its default values.


SliderRange

blocks - 2025-04-14T045251.494

Sets the range and increment of the Slider.

  • Values ​​can be with decimal or integer.
  • Default values: 0 to 100 in increments of 1.

CurrentSliderValue


GetMinValue

blocks - 2025-04-14T044442.010


GetMaxValue

blocks - 2025-04-14T044446.267


SliderColors

Sets the colors of the bar and thumb.

blocks - 2025-04-14T044341.156


ThumbIcon

Change the thumb of a slider by an icon from assets.

You can set any size, but the recommended size is 24px x 24px.


Indicator

Adds an indicator to show the slider's progress in the thumb position.

Pressing or sliding the thumb will cause the indicator bubble to appear, and releasing your thumb will cause the bubble to disappear.

  • Use formatDecimals to define the number of decimal places (e.g., 0 = no decimal places, 1 = one decimal place, etc).

IndicatorMargin

Sets a margin between the bubble and the thumb.

blocks - 2025-04-14T055902.026

In Android 11 and Android 14 the bubble was set at different distances, with this you can set the distance of the bubble.


SetThumbPosition


ValueChanged

component_event (49)


StartTracking

Event triggered when the slider starts being tracked.

component_event


StopTracking

Event triggered when the slider stops being tracked.

component_event (50)


MaxValueSet

Event triggered when the maximum value of the slider is set.

component_event (51)


MinValueSet

Event triggered when the minimum value of the slider is set.

component_event (52)


Update v1.1 April 14, 2025.

Note!

If you're already using this extension, save your project before updating so you don't lose anything. I've modified the text in all blocks for clarity and added new blocks.

New blocks:

  • ThumbIcon
  • Indicator
  • IndicatorMargin

Update v1.2 April 16, 2025.

GIF_20250416_043442_656

The following events were not firing:

  • MaxValueSet
  • MinValueSet
    This has been fixed.

A new event has been added:

  • StartTracking

When using the Indicator function, the events were not firing.

  • This has been fixed.

Update v1.2 April 16, 2025.

Slider.aia (26.0 KB)


Event Testing:
SliderEventTest.aia (980.9 KB)

I have used TaifunSettings VolumeMusic extension from Taifun to test the ValueChanged event.


joejsanz.joedevslider.aix (18.6 KB)


JDK: 11
Minimum API Level: 21
Updated On: 2025-04-16T07:00:00Z

Built using: FAST-CLI v3.0.0


Thanks.

9 Likes

Nice extension, but only integer values ​​can be used as minValue and maxValue. And unlike the Slider component, there is apparently no fixed number of values ​​(100) distributed over an interval.

1 Like

this one with wrong block photo.

1 Like

It's true, I hadn't looked at that, thanks Anke.

The block is resolved, thanks KevinKun.

Nice extension, but at certain values ​​this slider shakes and the displayed value changes continuously.

Yes, thank you very much for the observation, I am making some corrections, I hope to update the extension in a few hours.

Updated extension

Several blocks have changed, now it is simpler but useful, since there are several functions and events that the slider integrated in ai2 does not have.

2 Likes

Can you provide the source code? What IDE did you use to create this extension?

I did it in niotron

hi can i have link of Tformet. i tried to find it everywhere...

TFormat. Search...

Just as Anke said, it is the first thing that appears when searching for TFormat

1 Like

thank you i have use this in my app :+1:

1 Like

Update:
Version 1.0.1.

1 Like

Update v1.1

3 Likes

Dear @Joejsanz I really do love the "car" cursor :hugs: :hugs: :hugs: for my digital dashboard (speed and RPM bargraphs, you can see it at Just another OBD2 (CAN protocol) digital dashboard).
5 stars evaluation !!!

2 Likes

Thank you very much uskiara, I just saw your post, it looks very good and your application is very interesting, I like it, but I haven't been able to try it yet, but I'm sure I will as soon as I get back to using the computer.

1 Like

Dear @Joejsanz,
to test it, fisrt of all, you need a car (obviously :rofl:) featuring the diagnostic protocol KWP2000 and an OBD to BT converter (really a very few Euro on Amazon or similar). If you don't have one, my hint is anyway to avoid to buy the cheapest one, because sometimes some of them do not have the "real" ELM327 but a clone, that in some cases isn't 100% compatible. Therefore the mean reasonable price can be around 10-14 Euro.
To ease your life, you can find here below the Arduino UNO + HC05 simulator to test it with your phone: in this case the Arduino+HC05 behave like the car interfaced with the ELM327. Just few lines of code, but it works responding to the app with the sentences that a car sends to a KWP2000 enquiry about Speed, RPM and turbo boost pressure (and others that I use to simulate my Peugeot 207 CC). it varies some values, by increasing and decreasing, as the car was really rouling.
Simulatore_OBD.ino (3.6 KB).
Forgive me if it is a very dumb code, without comments, but it has been intended just for my personal use, therefore comments have remained in my keyboard ... :grin: :grin: :grin:
(and, if some comments are there, most probably they are in Italian...)
All the best, Ugo.

2 Likes

Hi Joe, greetings, friend. I've been testing the extension in a radio app with audio slider functionality, but there's no exception in the radio app's audio gain. I'll leave you the block I use and any suggestions.

Thanks.

1 Like