How do I make my progress bar respond to the value it is set at?-CodePudding

I have a JQuery UI progressbar and so far I have gotten it to work if the screen size is large. However, I am stuck on how to make both the progressbar and the progress showing inside to shrink and adjust to different screen sizes.

Below is my simplified code for the JQuery UI progressbar to show. In my real code, my value does change, but, even if I set it to a fixed value, it doesn't work anyways.

HTML

<div id="progressbar"></div>

CSS

.ui-widget-header {
  background: #cedc98;
  border: 1px solid #DDDDDD;
  color: #333333;
  font-weight: bold;
}

$('#progressbar').progressbar({
   value: 37
});

As you can see, I have a value of 37. However, when I try to shrink the browser width, the progress bar just fills it up such that the value changes to 100.

The progress in the progress bar not responding to each other

I have tried searching solutions up but none works. I tried setting width: 100% and/or wrapping the progress bar in another div, etc, but none to do not work.

I really expected that it keeps it filled up at only 37% of the entire progress bar even when I shrink the size of the window, just like how it is on the JQuery's link: https://jqueryui.com/progressbar/.

CodePudding user response：

Practice with the following.

$(function() {
  $('#progressbar').progressbar({
    value: 37
  });
  $("#setWidth").change(function() {
    $(".progress-wrapper").css("width", $(this).val());
  });
});

.ui-widget-header {
  background: #cedc98;
  border: 1px solid #DDDDDD;
  color: #333333;
  font-weight: bold;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<div><label>Set Width</label><input type="text" id="setWidth" /></div>

<div  style="width: 100%;">
  <div id="progressbar"></div>
</div>

The jQuery UI Progressbar is designed to be responsive. Change the window here and you should see that both the border and the inner element shrink responsively.

You can also change the width of the parent, by typing in a value in the field above, like 40% or 240px and it will do the same.