Hello,
I don’t understand your form’s structure,
You have two slider fields, but what do you mean with 2 input with sliders values? Are you talking about two calculated fields?
If the slider fields are for example, fieldname1 and fieldname2, the equation associated to the calculated field for the total would be as simple as:
fieldname1+fieldname2
Could you send me the link to your webpage and indicate the name of the fields you are referring, please?
Best regards.
Thread Starter
frunky
(@frunky)
This is the link
I don’t understand how I can create slider with input field which I can change value manually, I only can create slider with div caption.
And so I create html block with same structure
<div class="slider-content">
<label for="fieldname35_1">Вырезы под розетки</label>
<div id="slider3"></div>
<script>
$(function() {
$("#slider3").slider({
range: "max",
min: 0,
max: 6,
value: 2,
slide: function(event, ui) {
$("#fieldname35_1, #fieldname38_1").val(ui.value);
}
});
$("#fieldname35_1, #fieldname38_1").val($("#slider3").slider("value"));
$('#fieldname35_1, #fieldname38_1').bind('change paste keyup', function() {
$("#slider3").slider("value", $(this).val());
$("#fieldname35_1, #fieldname38_1").val($(this).val());
});
});
</script>
</div>
-
This reply was modified 8 years, 11 months ago by
frunky.
-
This reply was modified 8 years, 11 months ago by frunky.
-
This reply was modified 8 years, 11 months ago by frunky.
Thread Starter
frunky
(@frunky)
Thanks for quick answer!
This is the link
I don’t understand how create slider with input which users can manually change input’s and slider’s value. I only can create slider with caption on <div>.
So I create html blocks with js scripts which init .slider() and send value to inputs and back.
Please look only js code in jsfiddle
-
This reply was modified 8 years, 11 months ago by frunky.
Hello,
The solution is simpler, and part of the process you want implement is included in the section “Tips & Tricks” of the plugin’s documentation:
http://cff.dwbooster.com/documentation#assign-slider-value-programmatically
1. Assign a class name to the slider field, for example: my-slider-1 (through the “Add Css Layout Keywords” property)
2. Insert the number field, I will call it: fieldname123 (you should use the corresponding field’s name in your form)
3. Insert a “HTML Content” field in the form with the pice of code below:
<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);
}
fbuilderjQuery(document).on('change', '[id*="fieldname123_"]', function(){setSliderValue('my-slider-1', this.value);});
fbuilderjQuery(document).on('change', '.my-slider-1 input', function(){jQuery('[id*="fieldname123_"]').val(this.value);});
</SCRIPT>
and that’s all.
The piece of code:
fbuilderjQuery(document).on('change', '[id*="fieldname123_"]', function(){setSliderValue('my-slider-1', this.value);});
updates the slider if the input’s value changes. And the piece of code:
fbuilderjQuery(document).on(‘change’, ‘.my-slider-1 input’, function(){jQuery(‘[id*=”fieldname123_”]’).val(this.value);});
updates the input if the slider’s value changes.
Best regards.
Thread Starter
frunky
(@frunky)
Thanks.
I used your code, but I was get error “Uncaught TypeError: Cannot read property ‘addClass’ of undefined”.
I was added ‘.’ to class name
fbuilderjQuery(document).on(‘change’, ‘[id*=”fieldname123_”]’, function(){setSliderValue(‘.my-slider-1’, this.value);});
Anyway I get “NaN” in inputs
Hello,
You don’t need to include the dot, because it is added to the class name into the procedure:
var id = fbuilderjQuery('.'+clss+' input').attr( 'id' );
By the way, the relationship between the number field and the slider field in the row: “Высота” is incorrect, the other fields are working fine.
About the sliders, they are not participating in the equations. Furthermore, if you there are calculated fields associated to the input fields and you want evaluate them when their values are modified programmatically, you should trigger an onchange event after assigning the value:
fbuilderjQuery(document).on('change', '.my-slider-1 input', function(){jQuery('[id*="fieldname123_"]').val(this.value).change();});
Best regards.
Thread Starter
frunky
(@frunky)
Thanks a lot!
But one moment.
If I press to slider I got this error “Uncaught TypeError: Cannot read property ‘addClass’ of undefined” in slider.min.js
I’m trying to deregister all jquery scripts and enqueue scripts from cdn, but no luck.
What we can do with that?
Thanks! Have a nice day!
Hello,
I’ve visited the link you sent me previously, and the form is not there. I’m using exactly the same piece of code in my local form, and it does not generate any uncaught error message.
Could you sent me the link to the webpage where is the form, please?
Best regards.
Thread Starter
frunky
(@frunky)
Hi!
Sometimes block with calculator disappears.
Link
Could you please refresh the page one more time while calculator not showing?
P.S: I used your code only to the first field.
Thanks.
Hello,
I think that the issue is not related directly with the code.
Could you create a ticket in my private webpage, with the access to your WordPresss to edit the form by myself, please? (indicate the form you are editing)
http://cff.dwbooster.com/contact-us
Best regards.
Thread Starter
frunky
(@frunky)
Thanks a lot, @codepeople!
I was submited access to my site.
Thank you
