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

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 6 replies, has 2 voices.

Last updated by José Arcos 1 year, 9 months ago.

Assigned support staff: José Arcos.

Author
Posts
#623290

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.

#623387

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.

#623402

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

#623407

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.

#623417

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');
#623429

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.

#623604

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.