[Resolved] Number input field replaced with jQuery UI slider in a CRED form

[Author]

Posts

[Kostas]

Hello,

I need to replace some number fields in a cred form with jQuery UI slider.
I 've got the slider working outside of the form, but not inside the cred form. Inside the form, style info is somehow stripped.
Any ideas?

I can send login info if needed.

Thank you,
Kostas

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Kostas,

Thank you for contacting our support forum.

Yes please provide me with admin access to the form as well as the code so that I can have a look.

The private fields will be enabled for your next response.

Thanks,
Shane

[Kostas]

Hi Shane,

Thank you for responding.

Right now, the shown slider is outside of the form. I have connected it with the first number input, just as a proof of concept. It shouldn't be there, but as I put it inside the form, style is stripped and the slider disappears.

I need all number inputs to be shown as sliders.

Please check it out, your expertise will be appreciated.

Thank you,
Kostas

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Kostas,

Thank you for the patience, i've managed to work on a solution that works just as well with just a few lines of javascript.

Add the following to your js editor.

jQuery(document).ready(function(){
        jQuery('.range').prop('type', 'range');
        jQuery('.range').attr('min', '0');
        jQuery('.range').attr('max', '100');
        jQuery('.range').attr('step', '0.1');
        jQuery('.range').on('change', function() {
  jQuery("#slider02").text("Range Value: "+this.value);
  console.log(this.value);
});

});

This should convert your input field to a slider field. I've added it to the form so that you can test it out.

Please let me know if this helps.

Thanks,
Shane

[Kostas]

Hi Shane,

Thank you for the code.

Input fields are now converted to sliders, but the range values are not monitored (set below sliders), so the user does not know the value he is setting. However, range values are correctly set in the database. There is a glitch with the JS somewhere.

Please note, I have added another slider and also changed slider numbers.

Thank you,
Kostas

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Kostas,

Not sure what you're seeing but when i checked the page I'm able to see the slider and when I slide it the values are reflected.

Could you send a screenshot of when you move the slider.

Thanks,
Shane

[Kostas]

Hi Shane,

Please see the screeen shot I have uploaded.

I have noticed that if I clear the browser cache, the slider works as expected. On next load of the page (form) and all subsequent times, range value always remains at zero.

Thank you,
Kostas

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Kostas,

I tested this with multiple reloads and it still works on my end.

Could you try removing your original slider and try again since it won't be needed anymore.

Thanks,
Shane

[Kostas]

Hi Shane,

Apparently, the jQuery UI slider is not reliable, as it works differently on different systems.
I tried bootstrap-slider (hidden link) instead and found it consistent and reliable.

Cheers,
Kostas