How to creat slider with showing value in Form

Printed From: openElement Website
Category:

openElement

Forum Name: Element Editor
Forum Description: Create and share your own custom elements to use with openElement
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=818
Printed Date: Apr 16 2024 at 11:49am
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com

Topic: How to creat slider with showing value in Form

Posted By: djju1029
Subject: How to creat slider with showing value in Form
Date 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?

Replies:

Posted By: Dmit OE
Date Posted: Sep 01 2016 at 5:49pm

Please give some example on the Web of what you want to achieve

Posted By: djju1029
Date 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

Posted By: Dmit OE
Date 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>

Posted By: Dmit OE
Date Posted: Sep 01 2016 at 7:51pm

If it does not work please publish online and give the link.

Posted By: djju1029
Date 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'?

Posted By: Dmit OE
Date Posted: Sep 08 2016 at 10:48am

I mean upload the website online, so that I can access it via a link (URL)

Posted By: djju1029
Date 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.

Posted By: Dmit OE
Date 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.

Posted By: djju1029
Date 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"

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

Posted By: djju1029
Date Posted: Oct 13 2016 at 4:14pm

However, I resolve how to copy the value of slider to the value of text input box immediately.

But I have no idea how to do the opposite way of above such as:

. if user type number in text ane press "ENTER"

. then the slide bar should move to the value point which user typed.

How can I immplement this function?

Thank you in advance,

Posted By: Dmit OE
Date Posted: Oct 13 2016 at 8:41pm

Did you try to copy 3) with some modifications, to send the value in the opposite direction and force update?

$('.Rrange-mirror input').on('change', function(){

$('.Rrange input').val($(this).val()).trigger('change');

}).trigger('change');