CODEWITHSUNDEEP
htmlinput
Mikhail
Mikhail

Reputation: 103

Input range get value of input number and vice versa (oninput=...)

I have 2 inputs with type range and number which get values of each other.

Here is working code: 

<form>
    <input type="range" name="height" min="0" max="20" value="0" oninput="this.form.heightPlus.value=this.value" />
    <input type="number" name="heightPlus" min="0" max="20" value="0" oninput="this.form.height.value=this.value" />
</form>

But I need to put into div, not in form.

How should I change oninput

oninput="this.form.width.value=this.value"

I tried smth like 

$('input[name=height]').val()

but no result

Upvotes: 1

Views: 852

Answers (3)

Mikhail
Mikhail

Reputation: 103

I have "string" of 4 columns: 1. Select (type of thing) 2. Input range + (input number(now added)) (height of thing) 3. Input range + (input number(now added)) (width of thing) 4. Input readonly calculation

User enter data of first 3 columns get result then he can add one (then two,three...) more string (click add button) or go to callback form (submit button). When he click submit form is opened and there are popup form whit some fields: name, phone, user datas in the textarea: 1. Thing Type 1 40x60 2400 2. Thing Type 2 40x50 2000 .... Datas texarea gets via form="send".

Everything worked great but I need to add input number which duplicate input range value and vice versa. Input range at first looked this way in html 

<div class="gallery">
<input form="send" type="range" min="40" max="300" name="width[]" value="40">
</div>

then I deleted it from html and added via jQuery as you could see: jsfiddle.net/MikhailZ/2dJAN/1496

Now I have problems with counter. Name = width1 in every string. Also problem with .append/.html When I had .append when I got popup form I click submit button and got one more input range and input number in every div of every string. I change to .html, no cloning but now when I get min input values to popup form. For example, user chose 1. Thing Type 1 100x60 6000 but in the form I get 1. Thing Type 1 40x40 6000

Upvotes: 0

PraveenKumar
PraveenKumar

Reputation: 1861

I hope this helps you

<div>
    <input type='range' name="height" id='height' min='0' max='20' value='0' oninput='document.getElementById("heightPlus").value=this.value' />
    <input type='number' name="heightPlus" id='heightPlus' min='0' max='20' value='0' oninput='document.getElementById("height").value=this.value' />
</div>

For your fiddle change the Jquery code as below

Html:

<div class="gallery-slider" ></div>

Jquery:

var counter = 0;
$('.gallery-slider').append("<input type='range' id='width' name='width" + counter + "' min='40' max='200' value='40'/><input type='number' id='widthPlus' name='widthPlus" + counter + "' min='40' max='200' value='40'/>");
$(document).on('input', '#width', function(event) {
    $(this).next().val($(this).val());
});
$(document).on('input', '#widthPlus', function(event) {
    $(this).prev().val($(this).val());
});

Upvotes: 2

maja
maja

Reputation: 18034

In such a case, you would usually give each input element a unique id property and use window.getElementById('idValue').value =... to set the value. This does not even require jQuery.

HTML:

<input type="range" id="idValue" min="0" max="20" value="0" oninput="window.getElementById('otherIdValue')=this.value" />

Upvotes: 1

Related Questions