calculate price range for a progress bar

[paulmagm]

Hey,

i m trying to create a progress bar of price range. Like the image at the end of my post.
I have both prices, but i have to calculate some different numbers, otherwise my bar is with this prices always near full.

  <progress class="tw-flex-grow tw-w-full high-low-range-slider tw-mt-3" min="0" max="<?php echo file_get_contents('/shortcode/text.php?coin='.$t['page.content_slug'].'&info=high_24hr'); ?>" value="<?php echo file_get_contents('/shortcode/text.php?coin='.$t['page.content_slug'].'&info=low_24hpr'); ?>"></progress>

 

my values are here..

    	case 'low_24hr':
                $text = '' . $coin->low_24h . '';
                break;
          case 'low_24hpr':
                $text = '' . $coin->price_usd . '';
                break;       
         case 'high_24hr':
                $text = '' . $coin->high_24h . '';
                break;                

My two questions are. Do someone have an idea how i can calculate a number for the progress bar and how i have to insert this calculation in my values.
Thank you.. already. I*m not a pro code.. only a small frontend guy.

Thank you very much.

[gw1500se]

You can't really do it with just PHP, which is server side only and stateless. It would take the user to do something each time you wanted to update the bar. The only way I can think of is to use Javascript to update the progress bar which is client side. If the server is needed to provide some kind of data to update the bar then you will need to use Ajax. Perhaps you need to explain what event(s) cause the progress bar to be updated.

Edited November 1, 2021 by gw1500se

[requinix]

Insert what number into where?

What exactly is it you need to do? What's wrong with the HTML/PHP you have now?

[paulmagm]

12 minutes ago, requinix said:

Insert what number into where?

What exactly is it you need to do? What's wrong with the HTML/PHP you have now?

If i add the normal price like in min="0" max="61000" and value="59800" my progress bar is also nearly full. I think i have to calculate some % numbers to show a realistic progress bar? To show the range of the day (last 24h) in the progress bar.

 

Edited November 1, 2021 by paulmagm

[gw1500se]

Then you need to set  up a ratio to normalize the percentage.

$percent = ((%max - $price)/$max)*100

 

[paulmagm]

Yes i found out that to calculate in JS. is very simple. What is %max in your example?
What would calculate for max and value in <progress ... max="" value="".

[gw1500se]

Typo. Should be $max.

[Barand]

Calculation...

[paulmagm]

yes but how i put it in progress with max and value?

Or what i have to calculate for both and input.

Edited November 1, 2021 by paulmagm

[paulmagm]

If i do the calculation 

<script>document.getElementById("demo").innerHTML = (539.0000000000 - 536.8600000000) * 100;</script>

how i put this demo result in value=""

 

 

[gizmola]

To set an attribute of an element you want something like this:

el = document.getElementById("demo")
el.setAttribute("value", (your_calculation))

[paulmagm]

Found a way to import the result of the JS. But i still need help what exactly i have to calculate for value="" max="max price" low="0".

example

<progress value="document.getElementById('demo')" max="1000"> <script> document.getElementById("demo").innerHTML = document.querySelector('progress').value = (100 + 50) * 3; </script>

 

Edited November 1, 2021 by paulmagm

[paulmagm]

Anybody in which exactly calculation for max and which for value? Thanks!

[paulmagm]

18 hours ago, Barand said:

Calculation...

can i calculate "X" in this javascript for value=""?

Edited November 2, 2021 by paulmagm