Jump to content

calculate price range for a progress bar


Recommended Posts


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 . '';
          case 'low_24hpr':
                $text = '' . $coin->price_usd . '';
         case 'high_24hr':
                $text = '' . $coin->high_24h . '';

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.

Bildschirmfoto 2021-11-01 um 14.19.20.png

Link to comment
Share on other sites

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 by gw1500se
  • Like 1
Link to comment
Share on other sites

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.


Bildschirmfoto 2021-11-01 um 16.38.01.png

Edited by paulmagm
Link to comment
Share on other sites

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".


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


Edited by paulmagm
Link to comment
Share on other sites

This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.