Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

HTML set max value to max attribute

March 21 (3 years ago)

Edited March 21 (3 years ago)

Hi !

I've been having an issue with making a max-attribute being set in my character sheet :

What I made was a sliding bar going from 0 to 100, but I don't really know how to get the "max" value to interact with the max attribute (or maybe another attribute ?)


For example, I'd like it to go from 0-100 to 0-200, only by changing the max of an attribute called "test" from 100 to 200

Here's the html :

<input name="attr_f" class="faimtest" type="range" min="0" max="100" value="100">
March 21 (3 years ago)

   Up :(

March 21 (3 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

You'd want to use a separate attribute to store the current/max value, and then make a sheetworker that then compares the % difference between current/max value, and adjusts the attr_f value between 0 and 100, to how how much you have of the max value.

I think I was working on making an example for exactly this, but dunno if I ever saved it anywhere. If you or someone figures it out, add the example to this place: https://wiki.roll20.net/CSS_Wizardry#Custom_Progress_Bar


March 21 (3 years ago)

I'm sorry to ask this but you please explain it a little more ? I don't really know how to set a max value as an attribute, I tried this but it didn't work :

<input name="attr_f" class="faimtest" type="range" min="0" max="attr_fmax">
March 21 (3 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

You can't change the max/min ranges of an input in roll20, you need to use other stats as a step between to adjust the final value.


Have something like this.

<input name="attr_test" class="faimtest" type="number" min="0" value="100">
<input name="attr_test_max" class="faimtest" type="number" min="0" value="100">

<input name="attr_rangefinal" class="faimtest" type="range" min="0" value="100" max="100">

<script type="text/worker">
on("change:test change:test_max, function() {
getAttrs(["test","test_max"], function(values) {
let test = parseInt(values.test)||0;
let testmax = parseInt(values.test_max)||0;
let rangefinalnew = (test/test_max)*100;
setAttrs({
"rangefinal": rangefinalnew
});
});
});
</script>

Then make a sheetworker that changes changes the rangefinal  by calculating (test/test_max)*100.

You have to read the docs and examples to figure it out if my example code is wrong, but it should be in the right direction https://wiki.roll20.net/Sheet_Worker_Scripts

If both test & test_max have same value, rangefinal will be set to 100, showing it being full.




March 22 (3 years ago)

I got it to work !

I'm getting a new issue with this however..

The script only work once, after rangefinal has set its first value, it won't update anymore..

Any idea ?

                    
<input name="attr_rangefinal" class="faimtest" type="range" min="0" max="100" value="">


<input name="attr_testfaim" class="faimtest" type="number" min="0" value="">
<input name="attr_maxfaim" class="faimtest" type="number" min="0" value="">


<script type="text/worker">
on("change:testfaim change:maxfaim", function() {
getAttrs(["testfaim","maxfaim"], function(values) {
let testfaim = parseInt(values.testfaim)||0;
let maxfaim = parseInt(values.maxfaim)||0;
let rangefinalnew = (testfaim/maxfaim)*100;
setAttrs({
"rangefinal": rangefinalnew
});
});
});
</script>
March 22 (3 years ago)

up !

March 22 (3 years ago)

I tried adding the condition "sheet:opened" but now it'll refresh only after I close and reopen the sheet :/

March 22 (3 years ago)
Andreas J.
Forum Champion
Sheet Author
Translator

might be a good idea to have inital values saved for each stat, and possibly even a good idea to have a extra

<input name="attr_rangefinal" class="faimtest" type="hidden" min="0" max="100" value="100">

saved on the sheet, in case the type="range" doesn't work well as a standalone saving stat.

Otherwise I have no more ideas.