slider

may be an input field as a slider?

Hello ernst@volny.cz,
I'm not a Chrono professional, but after checking your new post, I think that the following links may help:
How can I use a jQuery slider?
P.S: I'm just an automated service😉

thank you, but it does not work

<?php
JHtml::('jquery.ui');
?> 

reports an error

syntax error, unexpected '('

and use the plugin did not work

Please do not know what's wrong?

Hi Ernst,

The code works OK in my test forms.

Please post a link to your form so I can take a quick look.

Bob

thank you very much. I found a mistake, instead of

<?php
JHtml::('jquery.ui');
?> 

is supposed to be

<?php
JHtml::_('jquery.ui');
?> 

But still my slider displayed.
I tested it on the "http://pentagram.8u.cz/index.php/vyziva?view=form" in the slider.
You can send me your functional demo form?

I send my dysfunctional form

HI Ernst,

This line

        step: 1,
  });
});.slider('pips', {

has some extra code It should be

        step: 1,
  }).slider('pips', {

And you have an unwanted duplicate entry in the JS Files box that is preventing that loading correctly.

Bob

thank you very much, but this was lukewarm to the touch related parts.
The basic problem is that my slider is not displayed.
I made a small form with a slider (send in the appendix), but javascript console writes

Navigated to http://pentagram.8u.cz/index.php?option=com_chronoforms5&chronoform=test
jquery-migrate.min.js:2 JQMIGRATE: Migrate is installed, version 1.4.1
index.php?option=com_chronoforms5&chronoform=test:51 Uncaught TypeError: jQ(...).slider is not a function(…)(anonymous function) @ index.php?option=com_chronoforms5&chronoform=test:51i @ jquery.min.js:2fireWith @ jquery.min.js:2ready @ jquery.min.js:2K @ jquery.min.js:2

I do not really know with this advice, I tried to PHP 5.6.2 and PHP 7

and javascript is

<?php
JHtml::_('jquery.ui');
?> 
jQuery(document).ready(function(jQ) {
  jQ('#amount_slider').slider( {
    value: 1, 
    min: 0,     // sets the minimum value
    max: 500,   // sets the maximum value
    step: 10,   // sets the step size
    slide: calc,
  });

  function calc(event, ui) {
    var amount = parseInt(ui.value);
    jQ('#amount').val(amount);
  };
});

Hi Ernst,

Then I guess that you haven't installed the slider files ???

Bob

Which files you have in mind?
I proceeded according to this manual http://www.chronoengine.com/faqs/5276-how-can-i-use-a-jquery-slider up to the line "Now, as you move the slider the AMOUNT shows in the new input and will Be Submitted with the other form data. " and there would no longer be a slider display.

Hi Ernst,

It's hard to tell but the error you posted - Uncaught TypeError: jQ(...).slider is not a function(…) - is probably because the slider files - part of the JQuery UI package. Are not being found. You can see your form here with the slider showing after I have made the changes from my earlier post.

Bob

can you please send the corrected form?
Compare him with her and try on other sites.
I also learned how it is with uploading JQuery UI.

How do I get some results, I'll write it here

Hi Ernst,

Here you are.

Bob

thank you very much.
for me the slider does not show an error and therefore will jQuery UI.
I'm going to look for what's wrong when you load the library.

How do I get new knowledge, I know.

still there is no progress.
The problem is that there are loads library "JQMIGRATE: Migrate is Installed version 1.4.1" and you can not upload JQuery 1.12
It can not be ChronoForms some limitations when it is not validated?

Hi Ernst,

It has nothing to do with the ChronoForms validation; nor with the version of JQMigrate as far as I know,

Bob

I have already solved it, I write here this evening

I'm sorry until now I've got to write solutions.
JQuery Joomla is trimmed, for example neobasuje slider function.
therefore it must be downloaded from http://jqueryui.com/download/
and uploaded to the web, in my case in the library /media/system/jsfull/

then the JS code is:

 jQuery(document).ready(function(jQ) {
  jQ('#amount_slider').slider( {
    value: 1,
    min: 0,
    max: 10,
    step: 1,
  }).slider('pips', {
    prefix: '',
    step: 1,
    rest: 'label',
  });
  
  function calc(event, ui) {
    var amount = parseInt(ui.value);
    jQ('#amount').val(amount);
  };

  // enable clicks on the pip labels
  jQ('.ui-slider-label').click( function() {
    var ui;
    ui = {};
    ui.value = jQ(this).data('value');
    calc('', ui);
  });
});

and JS files is

<?php
echo JUri::root().'media/system/jsfull/jquery-ui.min.js';
echo "\n"; // this line is important to separate the entries
echo JUri::root().'components/com_chronoforms5/extras/jquery.ui.touch-punch/jquery.ui.touch-punch.min.js';
echo "\n"; // this line is important to separate the entries
echo JUri::root().'components/com_chronoforms5/extras/jquery.slider-pips/jquery-ui-slider-pips.js';
?>

and css files is:

<?php
echo JUri::root().'media/system/jsfull/jquery-ui.min.css';
echo "\n"; // this line is important to separate the entries
echo JUri::root().'components/com_chronoforms5/extras/jquery.slider-pips/jquery-ui-slider-pips.css';
?>

Others are described in http://www.chronoengine.com/faqs/5276-how-can-i-use-a-jquery-slider