SeekBar JavaScript (I)

✪ Luminous Organisation

JavaScript SeekBar (I)

Contents

Chapter I

1. What is SeekBar
2. Calling a default SeekBar
3. Setting minimum, maximum and value
4. Getting progress

Chapter II

5. Setting progress programmatically
6. Important lifecycle event: On Touch End
7. Importance of SeekBar
8. Wait a minute

1. What is SeekBar

❝A SeekBar is an extension of ProgressBar that adds a draggable thumb. The user can touch the thumb and drag left or right to set the current progress level❞ — Android Developers. You all know about ProgressBar which displays the current progress of any event. Usually ProgressBar displays progress at a percentage value, such as — downloading (87%) . Like ProgressBar, SeekBar has its current value, minimum and maximum range. We can say ProgressBar an output element, whereas SeekBar is an input element, where user can alter the value within a preset range. Here is an example of SeekBar. Its range is between 80 to 100 and value is 85 by default.




Now change this value by dragging. Click Get Progress button to get value. You can Set Progress value, too.

---

Summary: SeekBar is also known as ❝input type: range❞ in HTML. It is draggable by users, such as — YouTube media controller.

2. Calling a default SeekBar

In JavaScript Block Editor app, create a project. In HTML section, click on pencil , then click on SeekBar . A SeekBar element is added. RUN the project.

Minimum, maximum and value of this default (as you didn’t set these of your own) SeekBar is 0, 100 and 50 respectively.

---

Summary: HTML: SeekBar.

3. Setting minimum, maximum and value

Press back to edit HTML. You can see

Minimum, Maximum and Value

specs. Enter nonnegative integers there.

Nota bene: Minimum value should be 0 or less than Maximum Value; and Value (displayable value) should not be out of range.

---

Summary: HTML: SeekBar > add Minimum, Maximum & Value.

4. Getting Progress

Without fetching input value (= progress of SeekBar), SeekBar is nothing. You have to use JavaScript language for this. Imagine when and how you fetch user input. Got idea: when the user clicks on a button, system will show her a toast containing its value.
Add a New Line and then a Button. Set Text of Button: Get Progress or whatever you want. Set On Click event: press() .

GO TO JS. Click on the basket below RUN button. Click on +ADD.

Set Function Name: press .

Click on the pencil. Click Seek/Progress > Get Progress. Set Var: p and Id sb1 . Now click on Components from bottom right drawer. Click on Toast. Set Toast: p .

Oh, a silly mistake. You didn’t set the id of SeekBar in the HTML section. GO TO HTML. Set the Id of that SeekBar: sb1 .

Now RUN the project. Drag the bar and then click on Button to get input.

---

Summary: 1. Provide unique ID for SeekBar.
2. JS: Seek/Progress > Get Progress (into a variable)
3. //TODO: use this variable if needed.

No more today. Practice is more important than reading. So download JavaScript Block Editor

android app to practice this. Try to do these again and again and discover more. We'll discuss remaining lessons in the next chapter. Happy implementation!

Md. Tofajjol Islam
— Chief at
Luminous Organisation