Range Slider and Input Text Fields

@Robert1969Dec 19.2019

I am attempting to demonstrate the effects of a delivery based on the dates sub parts arrive. Input fields (individual parts) accept days +/- expected arrival dates and move the image at the top along a timeline. The input field slider is moves the image but text input does not. I’m also planning to use multiple fields/sliders to add/subtract days per part. This functionality has so far eluded me.

Any help would be appreciated.

“` <html> <head> <script type=”text/javascript”> function movex1(){ var x = document.getElementById(“spinx”).value; var image = document.getElementById(“test”).style; image.marginLeft=x+”px”; }

</body> </html> “`

to post a comment

JavaScript

21 Comments(s) _↴

@SempervivumDec 19.2019 — #The input field slider is moves the image but text input does not.[/quote]The reason is simple: In function changeRangeValue you are using the ID "range", however "range" is the type, the ID is "spinx".

 &lt;script type="text/javascript"&gt;
 function movex1() {
 var x = document.getElementById("spinx").value;
 var image = document.getElementById("test").style;
 image.marginLeft = x + "px";
 }
 
 <i>    </i>    function showValue(newValue) {
 <i>    </i>        document.getElementById("spinx").innerHTML = newValue;
 <i>    </i>    }
 <i>    </i>    function changeRangeValue(val) {
 <i>    </i>        document.getElementById("spinx").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>        showValue(val);
 <i>    </i>    }
 <i>    </i>    function changeInputValue(val) {
 <i>    </i>        document.getElementById("number").value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>        showValue(val);
 <i>    </i>    }
 <i>    </i>&lt;/script&gt;

I applied another two minor modifications:

1. Use event "oninput" for the number input, otherwise the up/down arrows don't have no effect on the slider and the image.

2. Call function movex1 explicitly in order to move the image.

 Days Δ EDD: &lt;input type="number" id="number" min="0" max="1200" 
 oninput="changeRangeValue(this.value);movex1();" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" id="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this.value)" step="1" oninput="changeInputValue(this.value);movex1();" /&gt;

@Robert1969authorDec 20.2019 — #@Sempervivum#1611998 Thanks for the help. Works beautifully. How do I use this to allow for multiple input field/slider inputs?

@SempervivumDec 20.2019 — #There are different ways to do this. I recommend the following procedure:

Place your elements into wrappers and use classes instead of IDs:

 &lt;div class="wr-slider"&gt;
 &lt;div class="test"&gt;
 &lt;h3&gt;&lt;img src="images/busright.png" width="64" height="22"&gt;&lt;/h3&gt;
 &lt;/div&gt;
 &lt;table border="0" width="1550"&gt;
 &lt;tr&gt;
 &lt;td colspan="24"&gt;
 &lt;hr&gt;
 &lt;/td&gt;
 &lt;/tr&gt;
 &lt;tr&gt;
 &lt;td&gt;1.1.20&lt;/td&gt;
 &lt;td&gt;1.15.20&lt;/td&gt;
 &lt;td&gt;2.1.20&lt;/td&gt;
 &lt;td&gt;2.15.20&lt;/td&gt;
 &lt;td&gt;3.1.20&lt;/td&gt;
 &lt;td&gt;3.15.20&lt;/td&gt;
 &lt;td&gt;4.1.20&lt;/td&gt;
 &lt;td&gt;4.15.20&lt;/td&gt;
 &lt;td&gt;5.1.20&lt;/td&gt;
 &lt;td&gt;5.15.20&lt;/td&gt;
 &lt;td&gt;6.1.20&lt;/td&gt;
 &lt;td&gt;6.15.20&lt;/td&gt;
 &lt;td&gt;7.1.20&lt;/td&gt;
 &lt;td&gt;7.15.20&lt;/td&gt;
 &lt;td&gt;8.1.20&lt;/td&gt;
 &lt;td&gt;8.15.20&lt;/td&gt;
 &lt;td&gt;9.1.20&lt;/td&gt;
 &lt;td&gt;9.15.20&lt;/td&gt;
 &lt;td&gt;10.1.20&lt;/td&gt;
 &lt;td&gt;10.15.20&lt;/td&gt;
 &lt;td&gt;11.1.20&lt;/td&gt;
 &lt;td&gt;11.15.20&lt;/td&gt;
 &lt;td&gt;12.1.20&lt;/td&gt;
 &lt;td&gt;12.15.20&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;&lt;br&gt;
 Part1&lt;br&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;

Then get the element you require by determining the parent node first and then the required child:

 function changeRangeValue(ele) { // ele is the number input
 var val = ele.value; // get the value
 var range = ele.parentNode.querySelector('.spinx'); // get the range slider
 range.value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 showValue(val);
 }

I didn't code this completely, shurely you will be able to tranfer this procedure to the other elements

@Robert1969authorDec 20.2019 — #@Sempervivum#1612030 Thanks again. Well done.

@Robert1969authorDec 23.2019 — #I have tried to get multiple slider/input fields to work but can't seem to get it right. I duplicated the code for each part and changed the ids to avoid collision, but just fall short of making each control add/subtract from the image...

``<i>
 </i>Part1 Days Δ EDD: &lt;input type="number" id="number" min="0" max="1200" 
 oninput="changeRangeValue(this.value);movex1();" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" id="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this.value)" step="1" oninput="changeInputValue(this.value);movex1();" /&gt;
 &lt;br&gt;
 Part2 Days Δ EDD: &lt;input type="number" id="number" min="0" max="1200" 
 oninput="changeRangeValue(this.value);movex1();" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" id="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this.value)" step="1" oninput="changeInputValue(this.value);movex1();" /&gt;
 &lt;br&gt;
 Part3 Days Δ EDD: &lt;input type="number" id="number" min="0" max="1200" 
 oninput="changeRangeValue(this.value);movex1();" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" id="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this.value)" step="1" oninput="changeInputValue(this.value);movex1();" /&gt;<i>
 </i>``

@SempervivumDec 23.2019 — #I recommend using the procedure I posted earlier. It doesn't need any IDs to work. Did you try it?

@Robert1969authorDec 23.2019 — #I did try and I can't get it to work. I'm afraid my JS familiarity isn't enough to modify your script.

@SempervivumDec 23.2019 — #As a first step I used the same configuration as you did: Three groups, each containing a slider and a text input. This code works:

&lt;!doctype html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function movex1(ele) {
 var pos = ele.value;
 // var image = document.getElementById("test").style;
 // image.marginLeft = x + "px";
 }
 
 <i>    </i>    function showValue(ele) {
 <i>    </i>        val = ele.value;
 <i>    </i>        document.getElementById("spinx").innerHTML = newValue;
 <i>    </i>        var val = ele.value;
 <i>    </i>        var range = ele.parentNode.querySelector('.spinx');
 <i>    </i>        range.value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>    }
 <i>    </i>    function changeRangeValue(ele) {
 <i>    </i>        var val = ele.value;
 <i>    </i>        var range = ele.parentNode.querySelector('.spinx');
 <i>    </i>        range.value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>        showValue(ele);
 <i>    </i>    }
 <i>    </i>    function changeInputValue(ele) {
 <i>    </i>        var val = ele.value;
 <i>    </i>        var input = ele.parentNode.querySelector('.number');
 <i>    </i>        input.value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>        showValue(ele);
 <i>    </i>    }
 <i>    </i>&lt;/script&gt;
 &lt;/head&gt;
 
 &lt;body&gt;&lt;b&gt;Parts Slip Demo&lt;/B&gt;&lt;br&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

@SempervivumDec 23.2019 — #Included sliding image:

&lt;!doctype html&gt;
 &lt;html&gt;
 
 &lt;head&gt;
 &lt;script type="text/javascript"&gt;
 function movex1(ele) {
 var pos = ele.value;
 var slider = ele.parentNode.querySelector('.img-slider');
 slider.style.marginLeft = (isNaN(parseInt(pos, 10)) ? 0 : parseInt(pos, 10)) + 'px';
 }
 
 <i>    </i>    function showValue(ele) {
 <i>    </i>        var val = ele.value;
 <i>    </i>        var range = ele.parentNode.querySelector('.spinx');
 <i>    </i>        range.value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>    }
 
 <i>    </i>    function changeRangeValue(ele) {
 <i>    </i>        var val = ele.value;
 <i>    </i>        var range = ele.parentNode.querySelector('.spinx');
 <i>    </i>        range.value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>        showValue(ele);
 <i>    </i>    }
 
 <i>    </i>    function changeInputValue(ele) {
 <i>    </i>        var val = ele.value;
 <i>    </i>        var input = ele.parentNode.querySelector('.number');
 <i>    </i>        input.value = isNaN(parseInt(val, 10)) ? 0 : parseInt(val, 10);
 <i>    </i>        showValue(ele);
 <i>    </i>    }
 <i>    </i>&lt;/script&gt;
 <i>    </i>&lt;style&gt;
 <i>    </i>    #test h3 {
 <i>    </i>        margin-left: 0px;
 <i>    </i>        overflow: hidden;
 <i>    </i>        color: red;
 <i>    </i>    }
 
 <i>    </i>    #test2 h3 {
 <i>    </i>        margin-left: 0px;
 <i>    </i>        overflow: hidden;
 <i>    </i>        color: red;
 <i>    </i>    }
 
 <i>    </i>    #test3 h3 {
 <i>    </i>        margin-left: 0px;
 <i>    </i>        overflow: hidden;
 <i>    </i>        color: red;
 <i>    </i>    }
 <i>    </i>&lt;/style&gt;
 &lt;/head&gt;
 
 &lt;body&gt;&lt;b&gt;Parts Slip Demo&lt;/B&gt;&lt;br&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 &lt;div class="img-slider"&gt;
 &lt;h3&gt;&lt;img src="images/busright.png" width="64" height="22"&gt;&lt;/h3&gt;
 &lt;/div&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 &lt;div class="img-slider"&gt;
 &lt;h3&gt;&lt;img src="images/busright.png" width="64" height="22"&gt;&lt;/h3&gt;
 &lt;/div&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 &lt;div class="img-slider"&gt;
 &lt;h3&gt;&lt;img src="images/busright.png" width="64" height="22"&gt;&lt;/h3&gt;
 &lt;/div&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

To do: Make the sliding image responsive.

@Robert1969authorDec 23.2019 — #This works marvelously... but all three parts control the single first image's date instead of there being multiple images.

@SempervivumDec 23.2019 — #In my test file they do not. To be sure that it's not browser dependent: What browser are you using? If it's a common one I'm gonna test it.

@Robert1969authorDec 23.2019 — #The script works in Chrome but not IE (which doesn't matter). I've attached a screen detailing the output.

![[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-12-23/1577116852-905689-chrome.jpeg]
](src)

@Robert1969authorDec 23.2019 — #> @Robert1969#1612132 attached

@SempervivumDec 23.2019 — #The screenshot looks fine, you need to adjust the URLs of the images only.

Does this mean that everything is OK now?

@Robert1969authorDec 23.2019 — #Not quite. We needed the three sliders/input fields to control the initial single image.

@SempervivumDec 23.2019 — #I'm a bit confused now: In your screenshot there are three images and each's position reflects the value of the number or text input. Is this not what you require?

You write: "We needed the three sliders/input fields to control the initial single image." Does this mean that there should be one image only and each of the controls should affect that image?

@Robert1969authorDec 23.2019 — #I'm sorry for the confusion. The idea is to move the single image along the x axis using the 3 slider/input fields. Each field contributes a value to the image position. For example, if input field 1 = 20, input field 2 = 30, and input field 3 = -5, the image would reside 45 days into the year (x axis).

@SempervivumDec 23.2019 — #Now I understand, the image slider should display the sum of all inputs. Thats easy, place the HTML where the slider should be displayed:

 &lt;b&gt;Parts Slip Demo&lt;/b&gt;&lt;br&gt;
 &lt;div class="img-slider"&gt;
 &lt;h3&gt;&lt;img src="images/busright.png" width="64" height="22"&gt;&lt;/h3&gt;
 &lt;/div&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;
 &lt;div class="wr-slider"&gt;
 Part1&lt;br&gt;
 Days Δ EDD: &lt;input type="number" class="number" min="0" max="1200"
 oninput="changeRangeValue(this);movex1(this);" /&gt;
 &lt;br /&gt;
 &lt;input type="range" min="0" max="1200" class="spinx" name="spinx" style="width:500"
 value="number.RangeValue(this)" step="1" oninput="changeInputValue(this);movex1(this);" /&gt;
 &lt;/div&gt;

and change the function to this:

 function movex1() {
 var inputs = document.querySelectorAll('.wr-slider input.spinx');
 var sum = 0;
 for (var i = 0; i &lt; inputs.length; i++) {
 sum += parseInt(inputs[i].value);
 }
 document.querySelector('.img-slider').style.marginLeft = sum + 'px';
 }

@Robert1969authorDec 23.2019 — #That's the ticket. Thanks so much for walking me through this!

@SempervivumDec 23.2019 — #You're welcome, fine that it's working now!

@MiqoDec 28.2019 — #Opened LifeInSYS digital marketplace where you can find free and premium WordPress themes, html templates, PSD files and much more... Also, you can become a author and sell your products and earn money, first 100 registered authors will be fees free and get 100% earning from sale.

Marketplace link: http://lifeinsys.com

Also in #JavaScript _↴

Javascript in AOL Browser How to use textarea value in self.location AutoCompleteSaveForm in Firefox

Success!

Help @Robert1969 spread the word by sharing this article on Twitter...

Tweet This

Range Slider and Input Text Fields

21 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Range Slider and Input Text Fields

21 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

21 Comments(s) _↴

Also in #JavaScript _↴