How to feed the value to a slider?

Hi,

Yes, that’s possible. Please, follows the steps below:

1. Assign a class name to the slider field, for example: my-field, the class names are assigned to the fields through the attribute: “Add Css Layout Keywords”

2. Insert a “HTML Content” field in the form with the piece of code below as its content:

<script>
function setSliderValue( clss, value )
{
var id = fbuilderjQuery('.'+clss+' input').attr( 'id' );
var fId = id.match(/_\d+$/);
fbuilderjQuery.fbuilder.forms[fId].getItem(id).setVal(value);
}
</script>

3. Finally, if the equation associated to the calculated field is for example: fieldname1+fieldname2, it should be modified as follows:

(function(){
var v = fieldname1+fieldname2;
setSliderValue('my-field', v);
return v;
})()

and that’s all.
Best regards.

thanks a lot.

Hello. This solution works for simple situations when there is no other conditional logic, but it does not work for conditional logic for some reason. Here’s the specific scenario: I’m trying to dynamically limit the minimum value (a dynamic floor) of the slider based on the value of another field. So if some field (fieldname1) = x, then the slider (fieldname2) value should never be less than 90% of x.

Here’s an example of code that I’ve created. It’s syntactically correct, but it does not work for some reason:

(function(){
var v1 = fieldname1;
var minLevel = v1 * 0.9;
var v3 = fieldname2; // This is the slider
var result = 0;

if(v3 < v1 * 0.9) { // If user tries to make slider value less than 90% of fieldname1
result = minLevel; // Slider value is set to minLevel
}
else {
result = v3; // Slider value is ok
}
setSliderValue(‘my-field’, result);
return result;
})()

So that does not work. How do I dynamically limit the minimum value of the slider based on the value of another field?

Hi @juliaangel5,

Your situation is different, you need modify the min value of the slider, the solution is very similar. Please, follows the steps below:

1. Assign a class name to the slider field, for example: my-field, the class names are assigned to the fields through the attribute: “Add Css Layout Keywords”

2. Insert a “HTML Content” field in the form with the piece of code below as its content:

<script>
function setSliderMin( clss, value )
{
var id = fbuilderjQuery('.'+clss+' input').attr( 'id' );
var fId = id.match(/_\d+$/);
fbuilderjQuery.fbuilder.forms[fId].getItem(id).min=value;
fbuilderjQuery.fbuilder.forms[fId].getItem(id).after_show();
}
</script>

3. Finally, if the equation associated to the calculated field is for example: fieldname1+fieldname2, it should be modified as follows:

(function(){
var v = fieldname1+fieldname2;
setSliderMin(‘my-field’, v);
return v;
})()
and that’s all.

If you need additional help, I can offer you a custom coding service. Please, visit the following link:

https://cff.dwbooster.com/customization

Best regards.

Thank you. Earlier today I also found this other thread (https://www.ads-software.com/support/topic/set-max-min-slider-values/), which also helped me solve this problem. I’m sorry I did not find that other thread sooner, but WordPress’s search functionality is not very good. Anyway, it works as expected now. Thank you.