How to creat slider with showing value in Form |
Post Reply | Page 12> |
Author | |
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
Posted: Aug 31 2016 at 9:30pm |
I want to creat the slider form with show value which can be syncronized by sliding value in the Form Element.
Therefore, I want to submit this form with other form such as text or check box, etc. How can I do this?
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
Please give some example on the Web of what you want to achieve
|
|
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
|
Dmit, thank you for your help! http://www.w3schools.com/jquerymobile/jquerymobile_form_sliders.asp
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
- Put a Custom Class (see Properties) onto a simple text field element, ex.
range-mirror - Make this "mirror" element invisible, then include it into the Send Mail element. This field will get the value from the actual "range" element. - Add a Code Block Visual, with a Custom Class e.g. "range", then add all the code inside, for example: <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <input type="range" name="points" id="points" value="50" min="0" max="100"> <script> // in the beginning and after each change, copy the value from the range input to the "mirror" input. $('.range input').on('change', function(){ $('.range-mirror input').val($(this).val()); // copy value from here to "mirror" field }).trigger('change'); // immediately run the code "on change" </script> |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
If it does not work please publish online and give the link.
|
|
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
|
Dmit, Thanks for your kind feedback.
I did it but It doesn't work. Could you let me clear what "publish online" means Do you mean that publishing it onto 'openElement General Discussion' or 'Suggestion Box'? |
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
I mean upload the website online, so that I can access it via a link (URL)
|
|
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
|
Oh, I see. Unfortunately, my website is running on local webserver for serving controlling and management for our company's equipment. Sorry about that.
|
|
Dmit OE
Admin Group Joined: May 31 2012 Status: Offline Points: 5283 |
Post Options
Thanks(0)
|
In this case, create a new empty project without template, and experiment with it; if it does not work, publish it online somewhere and give the link.
|
|
djju1029
Senior Member Joined: Aug 02 2016 Location: the US Status: Offline Points: 126 |
Post Options
Thanks(0)
|
Dmit OE,
I resolved this issue following your guide plus some change on html like this, (in my code, three sliding bar are controlled individually for Red,Green, and Blue laser) (following code is for RED) //(1) on Code Block (visual) with Custom Class="Rrange" <input type="range" min="0" max="100" value="0" step="1" onchange="RshowValue(this.value)" /> <span id="r-range">0</span> <script type="text/javascript"> function RshowValue(newValue) { document.getElementById("r-range").innerHTML=newValue; } </script> //(2) Text input box of form element with Custom class="Rrange-mirror" //(3) on Code Block (source) at the end of body by javascript $('.Rrange input').on('change', function(){ $('.Rrange-mirror input').val($(this).val()); }).trigger('change'); Thank you for your help
Edited by djju1029 - Oct 13 2016 at 3:33pm |
|
Post Reply | Page 12> |
Tweet
|
Forum Jump | Forum Permissions You cannot post new topics in this forum You cannot reply to topics in this forum You cannot delete your posts in this forum You cannot edit your posts in this forum You cannot create polls in this forum You cannot vote in polls in this forum |