I'm trying to get the average of 4 simple input sliders. I want to show the average value in a textfield. I'm pretty sure I need to use javascript/jquery. But i'm not very familiar with it, so I could need som help. I'm pretty sure it is very simple, but i don't know which event handler I should use etc.
I got 4 sliders just like this:
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="3" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
I would appreciate any kind of help.
Try this
$(".slider").change( function(e){
var b=0;
$('.slider').each(function(){
var a=parseInt($(this).val());
b=b+a;
});
var avg=b/4;
$('#textValue').val(avg);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Result - <input type="text" id="textValue" />
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="3" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="4" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="3" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
<div class="holder-left">
<p>Subjektiv eller objektiv?</p>
<input class="slider" type="range" min="1" max="5" value="5" />
<div class="left">Subjektiv</div>
<div class="right">Objektiv</div>
</div>
Related
Is there something wrong with the way I have formatted it or will I have to go the JavaScript route? I'm looking for the code to update automatically to whatever number I have set the slider to or vise versa.
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
It would be better to call a simple function to get the other input and set it's value regardless of ID. This goes to the parent element and then finds the child that doesn't match the same type of the initial input and sets it's value.
Just for future reference, it is not good practice to have elements with the same ID: https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute
function setValue(input) {
let val = input.value;
let selector = `input:not([type=${input.getAttribute('type')}])`;
let otherInput = input.parentElement.querySelectorAll(selector);
otherInput[0].value = val;
}
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
<div>
<input class="value" type="number" value="10" min="0" max="50" oninput="setValue(this)">
<input class="slider" type="range" value="10" min="0" max="50" oninput="setValue(this)">
</div>
All I had to do was wrap it in the form tag. Like so...
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
<form>
<div>
<input class="value" id="amount" type="number" value="10" min="0" max="50" oninput="rangeInput.value=amount.value">
<input class="slider" id="rangeInput" type="range" value="10" min="0" max="50" oninput="amount.value=rangeInput.value">
</div>
</form>
I have multiple inputs with their ID in the radio button group and range slider. I want the addition of all multiplication of checked radio buttons and range sliders. But I don't get checked radio button's input type text value. Below something I tried but it's the wrong code.
$(document).ready(function() {
$('.range').on('change', function() {
let total = 0;
let multiplyFactor = document.getElementById(`actualtime${inputIndex}`).value;
console.log(multiplyFactor);
$('.range').each(function() {
total += (parseFloat($(this).val()) * multiplyFactor);
});
$('#timetoproduce').text(total);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="starter"><input type="radio" id="" class="radio-roi"name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled></label><br>
<label for="plus"><input type="radio" id="" class="radio-roi"name="plan" value="plus" >
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled></label><br>
<label for="pro"><input type="radio" id="" class="radio-roi"name="plan" value="pro" >
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled></label><br>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>
<span id="timetoproduce" value=""></span>
You could do with :checked and next to find the input value
$(document).ready(function() {
$('.range').on('change', function() {
let n = $(this).attr('id').match(/\d+/g)[0];
let total = 0;
let checkVal = $('.radio-roi:checked').next('input').val();
let multiplyFactor = parseFloat(checkVal);
console.log(multiplyFactor)
$('.range').each(function() {
total += (parseFloat($(this).val()) * multiplyFactor);
});
$('#timetoproduce').text(total);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" id="" class="radio-roi" name="plan" value="starter" checked>
<input type="text" value="2" id="actualtime1" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="plus">
<input type="text" value="2.5" id="actualtime2" class="hiden-actual-time" disabled><br>
<input type="radio" id="" class="radio-roi" name="plan" value="pro">
<input type="text" value="3" id="actualtime3" class="hiden-actual-time" disabled><br>
<input type="range" class="range" id="range1" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range2" min="0" max="12" value="0" step="1"><br>
<input type="range" class="range" id="range3" min="0" max="12" value="0" step="1"><br>
<span id="timetoproduce" value=""></span>
I'm trying to link the event of two input types in a NodeList. I'm able to link a single pair of inputs but once I add more pairs, I'm unable to link them. What am I doing wrong?
var range = document.querySelectorAll(".inputRange");
var field = document.querySelectorAll(".inputNumber");
// console.log(range);
// console.log(field);
range.forEach(input => {
input.addEventListener("input", e => {
// console.log("RANGE EVENT: " +e.type)
field.value = e.target.value;
});
});
field.forEach(input => {
input.addEventListener("input", e => {
range.value = e.target.value;
});
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>
Iterate over only one of the collections, and inside the loop, get a reference to the linked input by navigating the nearby DOM, then add listeners to both:
document.querySelectorAll(".inputNumber").forEach((field) => {
const range = field.parentElement.nextElementSibling.children[0];
range.oninput = () => field.value = range.value;
field.oninput = () => range.value = field.value;
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>
Or you could reference the same index on the other collection:
const ranges = document.querySelectorAll(".inputRange");
document.querySelectorAll(".inputNumber").forEach((field, i) => {
const range = ranges[i];
range.oninput = () => field.value = range.value;
field.oninput = () => range.value = field.value;
});
<div class="card grd">
<h4 class="r1">Recipe</h4>
<p>Low</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="0.75" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="0.75" step=".01" />
</div>
<p>Mid</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="100" type="number" value="35" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="100" value="35" step=".01" />
</div>
<p>High</p>
<h2 class="r2"><input class="inputNumber" id="num1" min="0" max="1000" type="number" value="40" step=".01" maxlength="8" /></h2>
<div class="sldcon">
<input class="inputRange" id="range" type="range" min="0" max="1000" value="40" step=".01" />
</div>
</div>
I have tried to add a script from Stackoverflow that took ages to come by,
but it seems like the file is going against me, though it's working perfectly
fine in JSfiddle. http://jsfiddle.net/hqtsmayh/
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<div id="mysliders">
<label for="slider-1">Slider:</label>
<input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
<label for="slider-2">Slider:</label>
<input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
<label for="slider-3">Slider:</label>
<input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
<label for="slider-4">Slider:</label>
<input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
<label for="slider-5">Slider:</label>
<input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
<label for="slider-6">Slider:</label>
<input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
</div>
<hr />
<p>Total: <strong id="total"></strong></p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
<script>
$(window).load(function(){
$(document).on("pagecreate", "#page1", function () {
$(".add").on("change", function () {
addAll();
});
addAll();
});
function addAll() {
var sum = 0
$('.add').each(function (){
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
}
});
</script>
All I have in the header is a Jquery attachment:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Why not just this? tested in mobile Safari
Also beware of jsFiddle's default onload
$(window).load(function() {
$(".add").on("change", function() {
addAll();
});
addAll();
});
function addAll() {
var sum = 0
$('.add').each(function() {
sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
});
$('#total').html(sum);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>My page</h1>
</div>
<div role="main" class="ui-content">
<div id="mysliders">
<label for="slider-1">Slider:</label>
<input class="add" type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />
<label for="slider-2">Slider:</label>
<input class="add" type="range" name="slider-2" id="slider-2" min="0" max="100" value="40" />
<label for="slider-3">Slider:</label>
<input class="add" type="range" name="slider-3" id="slider-3" min="0" max="100" value="30" />
<label for="slider-4">Slider:</label>
<input class="add" type="range" name="slider-4" id="slider-4" min="0" max="100" value="65" />
<label for="slider-5">Slider:</label>
<input class="add" type="range" name="slider-5" id="slider-5" min="0" max="100" value="11" />
<label for="slider-6">Slider:</label>
<input class="add" type="range" name="slider-6" id="slider-6" min="0" max="100" value="90" />
</div>
<hr />
<p>Total: <strong id="total"></strong>
</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Footer</h1>
</div>
</div>
I have the following part of code for a cordova application:
$('.shadow-slider').addEventListener("touchmove",function(e){
e.preventDefault();
update();
shadow = x+"px "+y+"px ";
if (op != 1){
if(op.length > 3){op=op.substring(0, 3);}
color="rgba("+r+","+g+","+b+","+op+")";
}
else{
color="rgb("+r+","+g+","+b+")";
}
if (blur != 0){shadow += blur+"px ";}
shadow += color;
$('#object').css("text-shadow",shadow);
$('#code-output').html("text-shadow:"+shadow+";");
});
inside the $(document).ready() for some sliders.
html:
<div class="container">
<div class="jumbotron text-center">
<h1 class="text-center"><span class='text-warning'>Text Shadow Generator V1.0</span></h1>
<p>Create awesome text shadow with pure CSS3.</p>
</div>
<div id="sliders">
<div class="row text-center">
<div class="col-md-4">
<h1>X-axis</h1>
<input type="range" id="x" min="-10" max="10" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-4">
<h1>Y-axis</h1>
<input type="range" id="y" min="-10" max="10" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-4">
<h1>Blur</h1>
<input type="range" id="blur" min="0" max="10" step="1" value="0" class='shadow-slider'>
</div>
</div>
<!--End for shadow axis and blur sliders-->
<div class="container" style="margin-top:1em;"><p id="object">All text shadows will be applied here</p></div>
<div class="row text-center">
<div class="col-md-3">
<h1>Red</h1>
<input type="range" id="red" min="0" max="255" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-3">
<h1>Green</h1>
<input type="range" id="green" min="0" max="255" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-3">
<h1>Blue</h1>
<input type="range" id="blue" min="0" max="255" step="1" value="0" class='shadow-slider'>
</div>
<div class="col-md-3">
<h1>Opacity</h1>
<input type="range" id="o" min="0" max="1" step="0.1" value="1" class='shadow-slider'>
</div>
</div>
</div>
The problem is that when using jquery the addEventListener method the touchmove is not working.Any ideas ?
addEventListener is not a function in jQuery, you can replace this by :
$('.shadow-slider').on("touchmove",function(e){
// your code here
});
addEventListener is for pure JS :
document.addEventListener('touchmove', function(e){
// your code here
});
or for a specific html tag with an ID
document.getElementById('myDiv').addEventListener('touchmove', function(e){
// your code here
});