How to make sliders connected and constrained to a maximum value

#1

HI I’d like to make the sliders connected and constrained to a maximum value.

e.g.: I have 5 categories and the user should be able to adjust their values but in the end the sum of the values should be 100%

Cat. A = 0.2
Cat. B = 0.3
Cat. C = 0.1
Cat. D = 0.2
Cat. E = 0.2

How can I do this?

#2

Hi Francesco,

The interface builder doesn’t have any capabilities to have dynamic constraints or validation on the slidebars without custom HTML/Javascript coding.

You can do this however in two different ways.

The simplest is to handle it in the model. Let the user enter values that total to more than 100%, then normalize it in the model to sum to 100%.

Add these equations to the model. (In whatever language you are using).

Cat A = .2
Cat B = .2
Cat C = .2
Cat D = .2
Cat E = .2

Total Cat = Cat A + Cat B + Cat C + Cat D + Cat E

Actual A = Cat A / Total Cat
Actual B = Cat B / Total Cat
Actual C = Cat C / Total Cat
Actual D = Cat D / Total Cat
Actual E = Cat E / Total Cat

The “Cat” variables are your inputs. The model will then normalize the “Actual” values so they total to 1. Then use the “Actual” values elsewhere in your model.

An alternate approach would be handle this with validation in the sim interface. This will require you to create a JavaScript function and edit the HTML directly. It should total up the inputs, and when you submit the decision form will display an error and refuse to submit if the total isn’t 100.

WILL

1 Like
#3

Thanks! I’ll try it right away

#4

Hi,
I tried another approach to validate a decision (basically I would like to check if my decision is lower than a number). I tried to modify the HTML in the decision page and have JS code check the value of the training budget directly from the input element with the data-f-bind attribute set to "TrainingBudg[0,<Step>]" .

  • If the budget is below 50, an alert with the message “Missing budget” is displayed.
  • If the budget is 50 or above, the page is navigated to #dashboard.html .

here’s the snippet of code I pasted on the Simulate button code:
<button class="btn btn-primary f-action-button" data-f-on-click="var trainingBudget = parseFloat(document.querySelector('[data-f-bind=&quot;TrainingBudg[0,<Step>]&quot;]').value); if (trainingBudget < 50) { alert(&quot;Missing budget&quot;); } else { window.location.href = '#dashboard.html'; }">Simulate</button>

Unfortunately I can’t make this work as the sim is returning this error:
https://forio.com/v2/run/mancuso_f/department_merger_v2-1/0000018f3b0fe434b6072ca4bdd868b584eb/operations/var trainingBudget/
400: Bad Request
Type: java.lang.UnsupportedOperationException

I’m really stuck… could you kindly help me?

Thanks!

#5

Hi,

The issue is that data-f-on-click is used by Epicenter to trigger an operation on your model. I thinks your operation name is that long string.

If you want to run JavaScript, try using the standard onclick instead, see

I recommend putting that long JavaScript string into a function (possibly in index.html) and calling the function from the onclick.