Transferring a result to a slider max value

Hello @badmax69,

I’ll try to describe the process with a hypothetical example.

Assuming your current equation is: fieldname1+fieldname2 and you want use the result to define the max value in the slider field, you simply should edit the equation as follows:

(function(){
    var r = fieldname1+fieldname2,
        s = jQuery('.cff-slider-field .slider'),
        v = MIN(r,s.slider('value'));
    s.slider('value',v);
    s.slider('option','max', r);
    return r;
})()

As you can see, I’ve fixed too the value of the slider based on the new max.

And that’s all.
Best regards.

Thanks, it works fine, but it has an effect on all sliders.

How can I reduce it to one? I’ve already found two workarounds. Embed an HTML with the code:

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>

(function(){
var v = fieldname22*fieldname23;
setSliderValue('my-field', v);
return v;
})()

—

and the next one:

<SCRIPT>
function setSliderValue( clss, value, min, max )
{
var id = fbuilderjQuery('.'+clss+' input').attr( 'id' );
var fId = id.match(/_\d+$/);
fbuilderjQuery.fbuilder.forms[fId].getItem(id).setVal(value);
fbuilderjQuery('#'+fID+'_slider').slider({'min': min, 'max': max});
}
</SCRIPT>

How can I simply implement this for myself?

Hello @badmax69,

You can simply assign class names to the slider your want modify (the class names are assigned to the fields through their attributes: “Add CSS Layout Keywords”), for example: my-slider, and then you can use a variant of your first block of code:

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

<SCRIPT>
function setMax( clss, value )
{
  var f = fbuilderjQuery('.'+clss+' .slider'),
      v = MIN(f.slider('value'),value);
  f.slider('option', 'max', value);
  f.slider('value',v);
}
</SCRIPT>

and now the equation associated to the calculated field can be edited simply as follows:

(function(){
   var r = fieldname1+fieldname2;
   setMax('my-slider', r);
   return r;
})()

The advantage here is that you can call he setMax method from different equations, passing the class name that identifies the slider that will be modified and the value to assign as max.

Best regards.

Awesome, perfect. Thank you ??

Thanks for making this post badmax69 and for the solution codepeople. I have set up a form that I use to help the user slide the slider to choose the term to finance a vehicle. I set some hard code to max the slider based on the model year selected by the user.

If I click up on the number field to raise the model year the slider can rest and no rules are broken for max term to finance. However when I click the down arrow to start selecting older model years the slider still shows the old MAX number (if that was where the slider was sitting) until I manually move it.

I thought the solution would be to do this:

(function(){
var r = fieldname21,
s = jQuery(‘.cff-slider-field .slider’),
v = MIN(r,s.slider(‘value’));
s.slider(‘option’,’max’, r);
s.slider(‘value’,v);
return r;
})()

or

(function(){
var r = fieldname21,
s = jQuery(‘.cff-slider-field .slider’),
v = MIN(r,s.slider(‘value’));
s.slider(‘option’,’max’, r);
s.slider(‘value’,12); <———smallest possible number
return r;
})()

but the number showing under the slider will remain the old highest MAX number…is there a property to change the slider to correctly state the new MAX number?

hope that makes sense.

Sorry maybe overly described. I just want to change the “Term” slider control to the new MAX after I edit the “Model Year” number field. Works almost perfectly…just need that last touch.

Hello @hawker75,

I guess you are talking about the caption with the max and min numbers below the slider control, if it is the case, these elements have assigned the class names: left-corner and right-corner respectively. So, as part of your code you should include:

jQuery('.cff-slider-field .left-corner').html(r);

or

jQuery('.cff-slider-field .right-corner').html(r);

as appropriate in each case.

Best regards.

Hello,

As my slider is used to calculate Monthly payment it will not give the calculating field the correct number until I click on the slider. The Silder caption under the Min and Max captions remains the old MAX number until I click on it.The slider value caption is div id=”fieldname23_1_caption”.

So when I click down the model year to older model years the maximum months to finance stays high until I click the slider which sets the slider value correctly and the monthly payment field dependant on this value correctly calculates.

Hello @hawker75,

I’m sorry, but without checking your form in action I don’t know exactly what do you want, and the code you are using.

If you combines the code you sent me in the previous ticket and the code in my ticket, you will change the max/min values in the slider, and the captions for the max and min below the slider.

Best regards.

Here is the link:https://hubuf.com/quick-calc/

I created a user for you:
u: codepeople
p: codePeople$@2018

Here is my code:

in calculation field 1(to set the rules for Model Year and Maximum value number):
(function(){
if(fieldname20 <= 2013) return 60;
if(fieldname20 > 2013 && fieldname20 < 2017) return 84;
if(fieldname20 > 2016) return 96;
})()

Here is the Calculating field that sets the slider to have correct maximum and set the slider to 12 (Min value):
(function(){
var r = fieldname21,
s = jQuery(‘.cff-slider-field .slider’),
v = MIN(r,s.slider(‘value’));
jQuery(‘.cff-slider-field .right-corner’).html(r);
s.slider(‘option’,’max’, r);
s.slider(‘value’,12);
return r;
})()

note:I left v = MIN(r,s.slider(‘value’)); but it isn’t being used at the moment…

Thanks a ton for looking at this.

Hello @hawker75,

I’ve tried to access your webpage with the username and password you sent me, but it responds with the error message:

ERROR: Invalid username.

Best regards.

OMG! So sorry! fixed

Hello @hawker75,

Now, the error is:

ERROR: The password you entered for the username codepeople is incorrect.

Best regards.

copy and pasted pw here:codePeople$@2018

sorry for this ??

Hello @hawker75,

The error message now is:

Your account has not been approved yet.

Please, check first from your side that the webpage is accessible.

Best regards.