How to use Slider in Thunkable | Designer and Blocks Clear Explanation

Hello friends, welcome to the another tutorial of Thunkable. In this tutorial, we will know about Slider, it's uses and how to use it.

Slider

The Slider is a input component, which takes user input from a specified range of value (between 1 & 100, 1& 10 etc.). It is just like a progress bar, but the only additional feature is that, it can interact with the user i.e. The user can slide the thumb to a position, and we can read it for certain functions like controlling volume etc. The example of slider in volume control is shown below.

Uses

It is used where, we had to takes user answer to a question in numerical values (in a specified range like 1-100, 1-50 etc.). for e.g. in volume control, going to a certain position in video or audio etc.

How to use

We can simply drag and drop it in Thunkable. After that we had to customize it according to our needs. There is two options available for this namely Designer & Blocks section. First, we will know about the Designer section.

Designer

1. The first and main thing, that we had to do is to rename the Slider. This provides a unique name to the Slider, which will help us in writing blocks, by giving us idea, that which Slider is added for which function.
   
   
   
2. MinimumValue - It sets the minimum value of Slider i.e the lowest value of range (0-100), 0 is the lowest value.
3. MaximumValue - It sets the maximum value of Slider i.e the highest value of range (0-100), 100 is the highest value.
4. Value - It sets the current value of Slider by default i.e. the value which will be shown, when the app is run for first time. This value can also be changed in runtime (live) by Blocks.
5. Step - It sets the Step of slider i.e if the Slider is slided by the user, and the Step is 1, then the Slider will increment its value by 1 and go on by sliding. for e.g. if the range of Slider is (1-100) and Step is 5, then by Sliding one times, the value will be 5. For another slide, it will be 10 and so on.
   
   
   
6. Height - It sets the height of Slider. We can choose the height from available options,
   • Fit contents, Fill container - The Fill contents sets the height to automatically adjust itself according to the content present inside it, whereas, the Fill container will occupy all the available space for height.
   • Relative Size - It sets the height of Slider relatively to its parent container. i.e if the height of the layout, in which Slider is used is 500px, and we sets the height of Slider to 50%, then it's height will be 250px.
   • Absolute Size - It sets the height of Slider in pixels.
7. Width - It sets the width of Slider. All the available options, works the same as for height.
8. Visible - If sets to true, the Slider will be visible to user, otherwise not.
9. Margin - It sets the margin of Slider i.e the space between the Slider borders and neighbouring component (screen, switch, button etc.) borders.
   • Top - It sets the top margin of Slider.
   • Bottom - It sets the bottom margin of Slider.
   • Left - It sets the left margin of Slider.
   • Right - It sets the right margin of Slider.
10. Padding - It sets the padding of Slider i.e the space between the Slider content and it's borders.
    • Top - It sets the top padding of Slider.
    • Bottom - It sets the bottom padding of Slider.
    • Left - It sets the left padding of Slider.
    • Right - It sets the right padding of Slider.
11. Border - It sets the border of Slider. We can customize it, from the options available,
    
    • width - It sets the height of border. It accepts value in pixels.
    • color - It sets the color of border. we can choose any color from the dialog, or can enter rgba() or HEX Color Code.
    • style - It sets the style of border. It has 3 options,
      • solid - It shows a solid line as a border.
      • dotted - It shows a dotted line as a border.
      • dashed - It shows a dashed line as a border.
    • border radius - It smooths the corners of the border. If we set its value as 5, then the corner will be curved by taking radius 5px.
12. MinimumTrackTintColor - It sets the color of Slider track, that is left to the Slider Thumb (circular button). we can choose any color from the dialog, or can enter rgba() or HEX Color Code.
13. MaximumTrackTintColor - It sets the color of Slider track, that is right to the Slider Thumb. we can choose any color from the dialog, or can enter rgba() or HEX Color Code.
14. Disabled - If sets to true, the Slider will not take any user interaction.
15. ThumbTintColor - It sets the color of Slider Thumb. we can choose any color from the dialog, or can enter rgba() or HEX Color Code. (for android only).

Blocks

We can add functions to slider in the Blocks section, like a listener, which fires everytime for change in Slider value. We can also customize its design in realtime, and it will override the value of Designer section.

1. when "Slider" "on Value Change" - It fires everytime, when the Slider value change, and returns the New Value. we can use this block, along with Control & Logic blocks to do some function.
   
   
   
2. when "Slider" "on Sliding Complete" - It is same as the previous function, but the only difference is that, it fires only when we stops sliding, but the previous function fires everytime till we stops sliding. It returns the New Value, which we can use with Control & Logic blocks to do some function.
3. from "Slider" set "minimum value" to - It sets the minimum value of Slider i.e the lowest value of range. It accepts value in numbers from Math blocks.
4. from "Slider" get "minimum value" - It returns the minimum value of Slider.
5. from "Slider" set "maximum value" -  It sets the maximum value of Slider i.e the highest value of range. It accepts value in numbers from Math blocks.
6. from "Slider" get "maximum value" - It returns the maximum value of Slider.
7. from "Slider" set "value" to - It sets the current value of Slider, which is between the specified range. If we sets a value lower than it's range, then the lowest value will be applied on Slider, and if we sets a value higher than it's range, then the highest value will be applied on Slider. 
8. from "Slider" get "value" - It returns the current value of Slider.
9. from "Slider" set "step" to - It sets the step of Slider. The steps should be such that multiplying it with some number will give the maximum value. for e.g. if the range is 0-100, and we set the step to 5, then by multiplying 5 to 20 will give 100.
10. from "Slider" get "step" - It returns the current step of Slider.
11. from "Slider" set "Height" to - It sets the height of Slider. It accepts value in pixels from the Maths section.
12. from "Slider" get "Height" - It returns the current height of Slider.
13. from "Slider" set "Width" to - It sets the width of Slider. It accepts value in pixels from the Maths section.
14. from "Slider" get "Width" - It returns the current width of Slider.
15. from "Slider" get "Computed Height" - It returns the computed height of Slider i.e if we had set the height of Slider in percents or Fill parent/Fit contents, then we are not knowing the exact height of Slider. This method returns that height.
16. from "Slider" get "Computed Width" - It returns the computed width of Slider.
17. from "Slider" set "Visible" to - It sets the visibility of Slider. If true is assigned as it's value, then the Slider will be visible, otherwise not.
18. from "Slider" get "Visible" - It returns true, if the Slider is visible, otherwise false.
19. from "Slider" set "minimum track tint color" to - It sets the color of Slider track, that is left to the Slider thumb. It accepts value in colors from the Colors section.
    
    
    
20. from "Slider" get "minimum track tint color" - It returns the current minimum track tint color.
21. from "Slider" set "maximum track tint color" to - It sets the color of Slider track, that is right to the Slider thumb. It accepts value in colors from the Colors section.
22. from "Slider" get "maximum track tint color" - It returns the current maximum track tint color.
23. from "Slider" set "disabled" to - If sets to true, the Slider will not accept any user input.
24. from "Slider" get "disabled" - It returns true, if the Slider is disabled, otherwise false.
25. from "Slider" set "thumb tint color" to - It sets the color of Slider thumb (circular button that is moved by the user). It accepts value in colors from the Colors section.
26. from "Slider" get "thumb tint color" - It returns the current thumb tint color.

So friends, the tutorial for Slider ends here. If you had any query regarding the Slider, then ask me in comment box.

Thanks,

Programming Infinity