BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> Element Editor
  New Posts New Posts RSS Feed - How to creat slider with showing value in Form
  FAQ FAQ  Forum Search   Register Register  Login Login

How to creat slider with showing value in Form

 Post Reply Post Reply Page  12>
Author
Message
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Topic: How to creat slider with showing value in Form
    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?
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Sep 01 2016 at 5:49pm
Please give some example on the Web of what you want to achieve
Back to Top
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 01 2016 at 6:29pm
Dmit, thank you for your help!

The following link:
http://www.w3schools.com/jquerymobile/jquerymobile_form_sliders.asp
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Sep 01 2016 at 7:51pm
- 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>
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Sep 01 2016 at 7:51pm
If it does not work please publish online and give the link.
Back to Top
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 07 2016 at 1:01pm
Dmit, Thanks for your kind feedback.
I did it but It doesn't work. Cry

Could you let me clear what "publish online" means
Do you mean that publishing it onto 'openElement General Discussion' or 'Suggestion Box'?
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Sep 08 2016 at 10:48am
I mean upload the website online, so that I can access it via a link (URL)
Back to Top
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Posted: Sep 08 2016 at 3:17pm
Oh, I see. Unfortunately, my website is running on local webserver for serving controlling and management for our company's equipment. Sorry about that.
Back to Top
Dmit OE View Drop Down
Admin Group
Admin Group


Joined: May 31 2012
Status: Offline
Points: 5283
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: Sep 09 2016 at 1:39am
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.
Back to Top
djju1029 View Drop Down
Senior Member
Senior Member
Avatar

Joined: Aug 02 2016
Location: the US
Status: Offline
Points: 126
Post Options Post Options   Thanks (0) Thanks(0)   Quote djju1029 Quote  Post ReplyReply Direct Link To This Post Posted: Oct 13 2016 at 3:33pm
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
Back to Top
 Post Reply Post Reply Page  12>
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.109 seconds.