[Resolved] CRED – How to use JQuery UI Slider for numeric input

[Author]

Posts

[KonstantinS88]

I want to tuser the JQuery UI Slider for having a centered slider with a minimum of -3 and a maximum of 3. Initial start of the handle should be 0.

I know that the JQuery UI Slider showsn here might be the script to use: hidden link

I have a cred form with various numerical inputs that I want to use this slider on.

HTML:

[credform class='cred-form cred-keep-original']

<div class="form-group">
<label>Hintergrundwissen zum Fachgebiet</label>
[cred_field field='fieldname' value='' urlparam='' class='form-control' output='bootstrap']
<div id="slider"></div>
</div>

[cred_field field='form_submit' value='Einsenden' urlparam='' class='btn btn-primary btn-lg' output='bootstrap']
[/credform]

I have tried this code but nothing happens:

$( function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 500,
step: 50,
slide: function( event, ui ) {
$( "#cred_form_217_1-textfield-11-1520511905" ).val( "$" + ui.value );
}
});
$( "#cred_form_217_1-textfield-11-1520511905" ).val( "$" + $( "#slider" ).slider( "value" ) );
} );

- Whats wrong with the code?The console says slider function is missing?
- Is it because JQuery UI is not active? How do I properly embed the according JQuery UI CSS and JS?

Sorry but this editor lacks markup to frame the code. Got no idea whats wrong here.

[José Arcos]

Hello, thank you for contact us. I will try to do my best to help you.

WordPress has jQuery enqueued in compatibility mode, so you can't use the $ function, instead, use jQuery, so your code will be something like:

jQuery( function() {
  jQuery( "#slider" ).slider({
    value:100,
    min: 0,
    max: 500,
    step: 50,
    slide: function( event, ui ) {
      jQuery( "#cred_form_217_1-textfield-11-1520511905" ).val( "jQuery" + ui.value );
    }
  });
  jQuery( "#cred_form_217_1-textfield-11-1520511905" ).val( "jQuery" + jQuery( "#slider" ).slider( "value" ) );
} );

Please let me know if this solves the issue or if you need further details.

Have a good day.

[KonstantinS88]

Unfortunately this does not yet work for me. The message is the same, still the console still says "slider" is an unknown function:

Uncaught TypeError: jQuery(...).slider is not a function
at HTMLDocument.<anonymous> ((index):523)
at i (jquery.js?ver=1.12.4:2)
at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
at Function.ready (jquery.js?ver=1.12.4:2)
at HTMLDocument.K (jquery.js?ver=1.12.4:2)

Dont I have to include JQuery UI or is it a part of wordpress already as stated here:
hidden link

[José Arcos]

Hello again, yes you are right. jQuery UI Elements are not included in WordPress core, but following the guide that you shared should be easy to add the element that you need to your site.

Please let me know if this solves the issue or if you need further details.

Have a good day.

[KonstantinS88]

Got it, simply drop this into your themes functions.php

function load_JQuislider(){

	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery-ui-core');
	wp_enqueue_script('jquery-ui-slider');

	//Enqueue the jQuery UI theme css file from google:
	$wp_scripts = wp_scripts();
	
	wp_enqueue_style(
      'jquery-ui-theme-smoothness', //select ui theme: base...
      sprintf(
        '<em><u>hidden link</u></em>',
        $wp_scripts->registered['jquery-ui-core']->ver
      )
    );
	
}
add_action('wp_enqueue_scripts', 'load_JQuislider');

[KonstantinS88]

And there seems to an even easier solution without the need to add something to the functons.php as mentioned here:

https://toolset.com/forums/topic/number-input-field-replaced-with-jquery-ui-slider-in-a-cred-form/

Dont need any more assistance but could not add this info without marking it, sorry. Thread can be closed now.

[José Arcos]

Hello again, thanks for the info and to share the code. I'm glad to hear that the issue is solved. Could you mark it as solved?

Have a nice weekend.