BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
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: 02 Août 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: 31 Août 2016 at 22:30
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
Avatar

Joined: 31 Mai 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: 01 Sep 2016 at 18:49
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: 02 Août 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: 01 Sep 2016 at 19:29
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
Avatar

Joined: 31 Mai 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: 01 Sep 2016 at 20:51
- 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
Avatar

Joined: 31 Mai 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: 01 Sep 2016 at 20:51
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: 02 Août 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: 07 Sep 2016 at 14:01
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
Avatar

Joined: 31 Mai 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: 08 Sep 2016 at 11:48
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: 02 Août 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: 08 Sep 2016 at 16:17
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
Avatar

Joined: 31 Mai 2012
Status: Offline
Points: 5271
Post Options Post Options   Thanks (0) Thanks(0)   Quote Dmit OE Quote  Post ReplyReply Direct Link To This Post Posted: 09 Sep 2016 at 02:39
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: 02 Août 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: 13 Oct 2016 at 16:33
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 - 13 Oct 2016 at 16:33
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 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.