-5

My progress-bar is now operating on % scale. I want to change it from % to range scale.

min: 0 max: 10

This works in %:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="progress">
  <div id="test" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
</div>

But I want to change this from % to value range.

##update

Things with aria-value does not work. I don't know why.

I found a solution, I calculate the percentage from my response:

var calculations = data[1] / 10 * 100
Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
Software Architect
  • 131
  • 1
  • 10
  • 3
    [https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) – Sfili_81 Dec 22 '22 at 14:17
  • 7
    @SoftwareArchitect, that's not spam, nor is it useless. It's a helpful (if unexplained) reference describing `min` and `max` attributes which you'll need. Your question isn't clear, though. What specifically are you having problems with? – isherwood Dec 22 '22 at 14:26
  • 1
    I cannot set custom range as i said. My range is min=0, max=10, but now my progress-bar operates on % (max=100%, min=0%) – Software Architect Dec 22 '22 at 14:28
  • 2
    Why doesn't `min="0"`, `max="10"`, and `style="width: 80%"` serve your needs? Again, your question isn't clear. – isherwood Dec 22 '22 at 14:31
  • 1
    I changed description. Look at this now. I am more specific. – Software Architect Dec 22 '22 at 14:39
  • Are you saying that you want to indicate width with an integer? Why? How are you actually setting the value? Add more context and a use case to your question. – isherwood Dec 22 '22 at 14:43
  • 1
    yes i want to change value only from 0-10. I am uisng JS to change it, but now it calculating wrong state because of % :) – Software Architect Dec 22 '22 at 14:44
  • 1
    Now we're getting somewhere. Why not add your JavaScript to the snippet demo? That might have cleared things up in a hurry. – isherwood Dec 22 '22 at 14:45
  • To be fair the question looks ok to me, the OP wants to set `value`, `min` and `max` as we do for `progress`, but with others elements by using Bootstrap. The part I don't get is why wouldn't you just use percent as intended – Cédric Dec 22 '22 at 14:45
  • 1
    @Cédric because i get response range 0-10 and i need to make calculations to do it. I would but i thought it will be easier way. There is no problem to do calculations to calculate it. But i would prefer to use min max and value. – Software Architect Dec 22 '22 at 14:49
  • Seems to be a XY problem, I recommand you to fully explain what you are trying to do instead of trying to solve the problem that came with what you tryed – Cédric Dec 22 '22 at 14:51
  • Case is simply. I am suprised you do not understand. My actual range is 0-100%, BUT.. i have response range 0-10. Is this hard to understand? – Software Architect Dec 22 '22 at 14:52
  • this works in 50% because it hides striped-animated attribute: – Software Architect Dec 22 '22 at 14:57

1 Answers1

4

You can just change the style="width: 100%" to whatever % you want, this is not the % of the bar but the width of the inner blue bar. It seems like you are using Bootstrap. You can read about this progress bar here: https://getbootstrap.com/docs/5.1/components/progress/

You can also give aria attributes to your bar, which you can give a min and max value. (also seen in the link above)

For example: aria-valuenow="0" aria-valuemin="0" aria-valuemax="10"

.progress{
  width: 300px;
  margin: 20px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="progress">
  <div id="test" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%"></div>
</div>

Example with the aria values (copied from the Bootstrap docs):

.progress{
  margin: 20px;
  width: 300px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="2" aria-valuemin="0" aria-valuemax="10"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="4" aria-valuemin="0" aria-valuemax="10"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="6" aria-valuemin="0" aria-valuemax="10"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10"></div>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Jeremy
  • 1,384
  • 3
  • 10
  • 24
  • 1
    Hello, yes but i want to change it from % to value min-max range. As i mention in my main thread. – Software Architect Dec 22 '22 at 14:29
  • 1
    @SoftwareArchitect I explain in my post that you can do this with the ```aria``` attributes that bootstrap gives you with the bar, this way you can add a min and max value to the bar. – Jeremy Dec 22 '22 at 14:30
  • 1
    @SoftwareArchitect please stay respectfull, I was assuming you wanted the min/max value for screen accebilety purposes (for example: screen readers), since I could not 100% understand the question as you described it. Am I understanding that you just want a progress bar that you can fill a value from 1-10 in and changes itself? That will probably require a small bit of javascript. – Jeremy Dec 22 '22 at 14:37
  • 1
    @isherwood I suppose it's because `min` and `max` are applied to `progress` but the element isn't used by Bootstrap to make progress bar – Cédric Dec 22 '22 at 14:39
  • 1
    Yes this is it. Just change value from 0-10 and nothing more. – Software Architect Dec 22 '22 at 14:40
  • In that case you will have to put a custom attribute in, make a javascript function which checks that input on edit, then multiplies it by 10 (so you have the right %) and sends it back to the style.width from your progress bar. – Jeremy Dec 22 '22 at 14:50
  • Another way to do it, slightly more advanced, is to add custom classes into your bootstrap by using the utilities api: https://getbootstrap.com/docs/5.1/utilities/sizing/#utilities-api . Where (for example) the class "progressbar-3" equals to ```width: 30%```. – Jeremy Dec 22 '22 at 14:53
  • Ok i will try achive it with JS, but problem is here with: 'style="width: 100%"' -> values like: min="0" max="100" value="50" dont work. – Software Architect Dec 22 '22 at 14:55
  • @SoftwareArchitect Check the following link: https://stackoverflow.com/a/21723270/9288348 Here is the javascript code needed for what you are trying to achieve. I am pretty sure this is what you where looking for. – Jeremy Dec 22 '22 at 15:05
  • @Jeremy thanks! i achive it simpler. simple calculations: var calculations = data[1] / 10 * 100 – Software Architect Dec 22 '22 at 15:13
  • 1
    Ye that was my first aproach aswell, but was not certain if you wanted it fully responsible. As the answer from the link automaticly changes the calculated according to the min and max aria attributes (without the need of rewriting your javascript). But good to know this is enough! – Jeremy Dec 22 '22 at 15:15