Reflecting/changing Slider Value based upon change of value in an input field

  • Resolved szeeshanali

    (@szeeshanali)


    8 years ago

    Hi team,

    First of all great work in developing this plugin. Simply Great. Just creating an advance Financial calculator and am stuck at a point. Just want to reflect changes in an input field on the Slider. My input field is showing the value from the slider, but I want it two way, so that if the input field value is updated, the slider SLIDE BAR reflects it as well and slider value is also updated.

    If it is easier to answer after having a look at the Financial Calculator, please you can find the working example at: https://skippr.wiyatechnologies.net/pricing/ (Finance Tab)

    Any help in this matter is highly appreciated. Thank you so very much.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello,

    Please, visit the following link:

    https://cff.dwbooster.com/documentation#assign-slider-value-programmatically

    It includes a function definition to change the sliders’ values programmatically. If you want to use the function from a field that is not a calculated field, my recommendation is to insert a “HTML Content” field with a pair of script tags, and call the function from an onchange event associated to the input field.

    Best regards.

    Thread Starter szeeshanali

    (@szeeshanali)

    Hi CodePeople,

    Thank you for your answer but I think that I was unable to explain myself properly. I can assign the value to the slider but what I actually need is how to reflect it on the Slider GUI. Lets say slider is currently at $20000 and then user typed in $45000, the slider should scroll to $45000.

    Basically, it is a sort of two way binding between an input field and slider whereby change in either one of them is reflected. I had already shown the slider value on the input field, but just can’t seem to reflect it the other way round.

    Thank you so much and your help in this regard is highly appreciated.

    Plugin Author codepeople

    (@codepeople)

    Hello,

    The link I sent you previously describe exactly this behavior, for example, assuming your slider field is the fieldname1, and the number field is the fieldname2, you simply should insert a “HTML Content” field in the form with the following piece of code as its content:

    <script>
fbuilderjQuery(document).on('change', '[id*="fieldname2_"]', function(){
var id = fbuilderjQuery('inpu[id*="fieldname1_"]').attr( 'id' );
var fId = id.match(/_\d+$/);
fbuilderjQuery.fbuilder.forms[fId].getItem(id).setVal(this.value);
});
</script>

    If you need additional help, I can offer you a custom coding service through my personal website:

    https://cff.dwbooster.com/customization

    Best regards.

    Thread Starter szeeshanali

    (@szeeshanali)

    Thank you so much. I am filling in the customization so you can do that. Thank you again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Reflecting/changing Slider Value based upon change of value in an input field’ is closed to new replies.